温故知新----css基础
# css练习
项目参考至MDN
点此查看效果哦
代码
## 任务介绍
- 为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。
- 为header提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。
- 为footer提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。
- 将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100%
- 编写一个面向卡头规则集,使它们计算的总高度为 50px
- 浏览器会为 h2 和 p元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集： margin 设置为 0。
- 设置 article 的高度为 120px，但是使用 em来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。
- 编写一个规则集，使 h2 有效的字体大小为20px (使用 em表达) 以及一个适当的行高将其放置在标题的内容框的中央。内容框高度应该是30px
- 为页脚中的 p 编写一个规则集，使它的有效字体大小为 15px (使用 em表达) 以及一个适当的行高将其放置在页面的内容框的中央。内容框高度应该是30px
- 为 article 中的段落设置一个合适的 padding 值，让它和 h2 以及页脚的段落左边缘对齐
## 知识点
- 选择器：笔记
- 类型选择器（又名元素选择器）
- 类选择器
- ID 选择器
- 通用选择器（*）
- 属性选择器
- [子串值（Substring value）属性选择器
- 伪类
- 组合器和选择器组
- 选择器的优先级:
- 不同级别：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 同级：同一级别中后写的会覆盖先写的样式
- CSS数值和单位
- 长度和尺寸
- px 像素是一种绝对单位
- em 1em与当前元素的字体大小相同
- rem 但它总是等于默认基础字体大小的尺寸
- vw, vh: 分别是视口宽度的1/100和视口高度的1/100
- 百分比
- 颜色
- 十六进制值 例如：#ff0000
- RGB 例如：rgb(255,0,0)
- HSL
- 色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。
- 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
- 亮度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。
- Opacity 不透明度
- 函数
- 盒模型
- 标准盒模型(content-box)
- 原理<br>
内容宽高+内边距+边框+外边距
- 内容宽高<br>
width宽,height高
- 内边距<br>
元素的内边距在边框和内容区之间,它的属性是padding
- 单内边距属性:<br>
padding-top <br> padding-right <br> padding-bottom <br> padding-left
- 边框<br>
元素的边框就是围绕在内容和内边距的一条或多条线,它的属性是border
- 外边距<br>
围绕在元素边框的空白区域,设置外边距会在元素与元素之间产生一个间距,它的属性是margin
- 怪异盒模型(border-box)
- 原理<br>
内容宽度+外边距(内容宽高包含了内边距和边框)
- 垂直外边距合并<br>
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 同级元素发生合并<br>
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 父子级之间发生外边距合并<br>
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
- 外边距合并解决办法
- 同级元素给第二个元素浮动,添加绝对定位,单独设置某一个元素inline-block
- 父子级元素外边距合并解决办法
1. 给父级设置内边距代替自己外边距
2. 给父级加边框
3. 给父级overflow:hidden;
4. 设置绝对定位
5. 设置display:inline-block;
温故知新----css基础相关推荐
- css div快捷键,div+css基础
Div+css技术 Div是用于存放文字,图片,元素的容器 Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表) Html 文件 1 3 4 5 1 3 4 5 1 3 ...
- html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础 课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标 熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
- CSS基础_Day04
CSS基础 一.CSS继承 1.给 HTML 的 body 元素添加样式 每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
- CSS基础_Day03
CSS基础 一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
- CSS基础_Day02
CSS基础 一.字体 1.更改元素的字体大小 字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
- CSS基础_Day01
CSS基础 一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
- 学习笔记（二）——CSS基础
文章目录 一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式 三.选择器 3.1.基础选择器 3.1.1.标签 ...
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- 和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
最新文章
- C++手册_迅为干货 | C程序调用shell
- 集成学习-Bagging集成学习算法随机森林（Random Forest）
- java标识符遵循规范
- python 消息机制_Python并发编程之线程消息通信机制任务协调（四）
- 回到网易后开源APM技术选型与实战
- python 单向链表实现快速排序_若干排序算法的Python实现方法及原理
- hive 安装centos7
- 基于springboot的疫情网课教学平台
- oracle中每月调用一次,JOB——手工指定Oracle中job执行的时间间隔
- 17_多易教育之《yiee数据运营系统》用户画像-技术架构方案篇
- linux灯控软件下载,舞台灯光控制软件(MaizeDMX)
- 骨架屏Skeleton Screen
- Spring系列教程六： Spring jdbcTemplate在Dao中的使用
- mysql 超卖_MYSQL处理高并发，防止库存超卖（图解)
- android提示“SIM not provisioned”
- mars2d解决底图上下拖动超出边界出现灰色底
- shell中vi的基本操作及Xshell 常用命令
- python 高斯约当消元法求逆矩阵
- 信道建模（大尺度、小尺度、莱斯衰落、瑞利衰落、莱斯信道、瑞利信道）
- Python实现斗地主