一,三大类选择器
1.1基本选择器
标签名选择器
类名选择器
ID选择器
全局选择器 *
1.2组合选择器
① 后代选择器
selector1 selector2
② 子元素选择器
selector1>selector2
③ 并集选择器
selector1,selector2
④ 交集选择器
selector1selector2
1.3伪类选择器
:link 超链接未访问的状态
:visited 超链接已访问的状态
:hover 鼠标悬停在元素上
:active 鼠标在元素上,按键按下去
二、盒子显示模式和可见性
**2.1display属性**
值:
inline
inline-block
block
none (隐藏)
**2.2 visibility 属性**
值:
visible 显示
hidden
**2.3盒子模型的组成**
内容,内边距,边框,外边距。
影响盒子大小的因素:
内容大小、内边距的大小、边框的宽度
外边距并不是盒子的一部分,所以外边距不影响元素的大小,影响元素的位置
2.4 盒子模型的内容区域
① 设置内容区域的宽高的 css 属性
width
max-width
min-width
height
max-height
min-height
② 内容区域默认宽度
overflow: 值:
visible(默认,显示)
hidden(隐藏)
auto(如果内容溢出加滚动条)
scroll(加滚动条,不论内容是否溢出)
overflow-x 设置水平方向溢出内容的显示方式,值同 overflow 一样
overflow-y 设置垂直方向溢出内容的显示方式,值同 overflow 一样
注意:
使用
overflow-x
或overflow-y
设置一个方向上的溢出内容显示方式,另一方向自动加滚动条。
2.5盒子模型的内边距
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
padding 复合属性,同时设置四个方向的内边距
padding
一个值: 设置4个方向的内边距一样padding
二个值: 第一个值是上下内边距,第二个值是左右内边距padding
三个值: 第一个值是上内边距,第二个值是左右内边距,第三个值是下内边距padding
四个值: 四个值依次是 上内边距、又内边距、下内边距、左内边距
内边距规则:
1,padding的默认值是0,不能设置为负
2,行内元素设置上下边距,无法使盒子的占地位置变大,不建议设置。
2.6 盒子模型的边框
① 边框相关的 CSS 属性
border 同时设置四个方向的边框 复合属性
border-style 设置边框线风格 值: none、solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)
border-width 边框宽度
border-color 边框颜色
border-left 设置左边框
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
...
border-bottom
....
② 背景位置和边框关系
1,背景颜色会在边框下面,一般边框设置为实线看不到,如果边框设置为虚线能看到边框下面的颜色。
2,背景图片从内边距区域开始显示,不会在边框上显示。
2.7外边距
① 设置外边距
margin-left
margin-right
margin-top
margin-bottom
margin 复合属性
1个值 四个方向的外边距一起设置
2个值 第一个值:上下外边距 第二个值:左右外边距
3个值 第一个值:上外边距 第二个值:左右外边距 第三个值:下外边距
4个值 依次是 上 右 下 左
设置元素的左外边距和上外边距会让自己的位置移动
设置右外边距或者下外边距影响的是后面元素的位置
子元素的前面或左边如果没有兄弟元素,左或上外边距就是与父元素内容边界距离
② 行内元素设置外边距
行内元素只允许设置左右的外边距,设置上下失效。
③ margin 特殊的值
margin 可以设置为 负值:
margin-left 为负值,元素向左位移
margin-top 为负值,元素会向上位移
margin-right 设置为负值,右边的元素会覆盖到当前元素上
margin-bottom 设置为负值,下边的元素会覆盖到当前元素上
**margin 的值可以是设置为 `auto
块级元素的左右外边距设置为auto,元素会在父元素中水平居中。
上下外边距无法设置auto。
④ margin 塌陷
什么情况下发生margin塌陷?
给某个父元素的第一个子元素设置上外边距,上外边距会作用在父元素上,该现象称之为 margin 塌陷
或者
给父元素的最后一个子元素设置下外边距,子元素的下外边距会作用在父元素上,也是 margin 塌陷
如何解决 margin 塌陷?
方案一: 给父元素添加边框
方案二: 给父元素设置 css 属性 overflow:hidden (把父元素设置为 BFC)
⑤ margin 合并
两个兄弟元素垂直排列
前面的兄弟元素如果设置了下外边距,后面兄弟元素设置了上外边距
两个元素之间的距离取 上面元素下外边距和下面元素上外边距中大的一个
3 CSS 属性的继承
① 可以继承的 css 属性
字体属性(font系列),文本属性(文本对齐,行高),字体颜色
② 不可以继承的 css 属性
宽高设置,内外边距,边框,背景。
注意:
给 a 的父元素设置字体颜色和text-decoration 的时候,a 不会生效
原因:
a 有默认的 color 和 text-decoratoin 的设置,默认的样式设置权重比继承的样式大
直接对元素的样式设置 > 默认的样式设置 > 继承下来的样式设置
四、行内块元素的一些特性
4.1 文本属性会对行内元素和行内块元素起作用
行内元素和行内块元素可以被当做文本进行处理,如果在父元素那里设置文本属性,会对行内元素和行内块元素起作用
如何让一个行内块元素或行内元素水平居中对齐?
给它的父元素设置 text-align:center;
如何让一个行内块元素在父元素中垂直居中?
给父元素设置行高(行高=高度)
给行内块元素设置 vertical-align: middle
如何让一个块级元素在父元素中水平居中对齐?
给元素自己设置左右外边距为 auto
4.2 行内块或行内元素之间的空白
行内元素或行内块元素之间会出现空白,空白其实是代码中的换行符。
解决方案:
方案一:写代码的时候不换行,也没有空格
方案二:设置父元素字体大小为 0,子元素再单独设置字体大小