css注意点

矫情吗；* 2023-06-14 04:14 32阅读 0赞

em：相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小  
p\{  
text-indent：2em;  
\}//段落首行缩进两个字符

emmet语法  
emmet语法的前身时Zen coding，使用缩写来提高html/css的编写速度

**链接伪类选择器**  
a:link 选择所有未被访问的链接  
a:visited 选择所有已被访问的链接  
a:hover 选择鼠标指针位于其上的链接  
a:active 选择活动链接（鼠标按下未弹起的链接）  
***注意：*** 顺序固定（如上）

**:focus** 用于选取获得焦点的表单元素

**块级元素** div p ul ol li  
**特点：**

1.  自己独占一行
2.  高度、宽度、外边距、内边距都可以自己控制
3.  宽度默认是父级宽度的100%
4.  是一个容器（盒子），里面可以放行内元素或者块级元素

***注意：***  
文字类的元素里不能使用块级元素 p h1~h6

**行内元素** a strong b em i del span  
**特点：**

1.  相邻行内元素在一行上，一行可以显示多个
2.  高度宽度直接设置是无效的
3.  默认宽度就是本身内容的宽度
4.  行内元素只能容纳文本或行内元素

***注意：*** 链接里面不能放链接，链接里面可以放块级元素

**行内块元素** img input td  
**同时具有块级元素和行内元素的特点**

1.  相邻行内元素（或行内块）在一行上，一行可以显示多个，中间会有缝隙
2.  默认宽度就是本身内容的宽度
3.  高度、宽度、外边距、内边距都可以自己控制

**单行文字垂直居中**  
文字的行高等于盒子的高度 line-height = height

## CSS三大特性 ##

**层叠性：**  
相同的选择器给设置相同的样式，此时一个样式会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题  
就近原则  
**继承性：**  
子标签会继承父标签里的某些样式  
恰当的使用继承可以简化代码，降低CSS样式的复杂性  
子元素可以继承父元素的样式（text-，font-，line-开头的属性，以及color属性，大多是操纵文本样式的属性）  
行高的继承  
font: 12px/24px  
font: 12px/1.5 //当前元素文字大小的1.5倍  
行高可以跟单位也可以不跟单位  
**优先级：**  
当同一个元素指定多个选择器，就会有优先级的产生

1.  选择器相同，执行层叠性
2.  选择器不同，根据选择器权重执行

## **页面布局的三大核心** ##

盒子模型，浮动，定位  
**一、盒子模型**  
把HTML页面中的布局元素看作是一个矩形盒子，也就是一个容器  
包括：边框、外边距、内边距、和实际内容  
boeder-collapse：控制浏览器回值表格边框的方式，控制相邻单元格的边框  
collapse：合并  
padding不会撑开盒子的情况：不指定width/height的大小  
margin让块级盒子水平居中的条件：  
1.盒子必须指定了宽度  
2.左右设置为auto  
行内元素和行内块元素水平居中：给其父元素添加text-align:center

**嵌套块元素垂直外边距的塌陷：**  
父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值  
解决方案：

1.  给父元素定义上边框
2.  给父元素定义上内边距
3.  给父元素添加overflow:hidden

\*\*\*注意：\*\*\*行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换成块级元素或行内块元素就可以了

**盒子阴影** 不占空间，不会影响其他盒子排列  
box-shadow：h-shadow v-shadow blur spread color inset  
水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 将外部阴影改为内部  
**文字阴影**  
text-shadow：h-shadow v-shadow blur color

**二、浮动**  
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动  
**浮动特性**

1.  脱标  
    脱离标准流的控制移动到指定位置；浮动的盒子不再保留原先的位置
2.  浮动元素会一行内显示并且元素顶部对齐
3.  浮动元素会具有行内块元素的特性

***两个注意点：***

1.  浮动和标准流的父盒子搭配使用
2.  一个元素浮动了，理论上其余的兄弟元素也要浮动  
    浮动的盒子只会影响它后面的标准流，不会影响前面的标准流

**浮动元素不会压住标准流的文字**

**三、定位**  
将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子  
定位=定位模式+边偏移  
**定位模式：**

1.  static 静态定位  
    默认定位方式，无定位 标准流
2.  relative 相对定位  
    ①元素在移动位置的时候，是相对于它原来的位置来说的  
    ②原来在标准流占有的位置继续占有，后面的盒子仍以标准流的方式对待它（不脱标，保留原来位置）
3.  absolute 绝对定位  
    ①元素在移动位置的时候，是相对于它的祖先元素来说的，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准移动  
    ②如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点位移  
    ③绝对定位不再占有原来的位置（脱标）
4.  fixed 固定定位  
    ①元素固定在浏览器可视区的某一位置  
    ②以浏览器的可视窗口作为参照移动（和父级元素没有关系、不随浏览器滚动而变化位置）  
    ③不占有原来的位置
5.  粘性定位 sticky  
    可以看作相对定位和固定定位的混合  
    ①元素固定在浏览器可视区的某一位置  
    ②原来在标准流占有的位置继续占有  
    ③必须添加top bottom left right其中一个才有效果

**边偏移：**  
top bottom left right

**定位的叠放次序**  
z-index 可以是正数也可以是负数 数值越大越靠上

**绝对定位的盒子水平居中**  
1.left走父容器宽度的一半 50%  
2.margin往左走自己宽度的一半（负值）  
**垂直居中**  
1.left走父容器高度的一半 50%  
2.margin往上走自己高度的一半（负值）

**定位的特殊特性**

1.  绝对定位和固定定位也和浮动类似  
    ①行内元素添加绝对定位或固定定位，可以直接设置高度和宽度  
    ②块级元素添加绝对定位或固定定位，如果不给高度和宽度，默认大小为内容的大小
2.  脱标的盒子不会触发外边距塌陷
3.  绝对定位和固定定位会完全压住盒子  
    浮动元素不会压住标准流的文字和图片；绝对定位和固定定位会完全压住标准流所有内容  
    *因为浮动产生最初的目的是做文字环绕用的*

**元素的显示和隐藏**

1.  display  
    display: none; 隐藏元素 隐藏后不再占用原来的位置  
    display: block; 显示元素
2.  visibility  
    visibility: visible; 元素可视  
    visibility: hidden; 元素隐藏 隐藏后继续占有原来位置
3.  overflow 对溢出的部分显示与隐藏  
    overflow: visible; 显示溢出  
    overflow: hidden; 隐藏溢出  
    overflow: auto; 如果有溢出就添加滚动条  
    overflow: scroll; 有没有溢出都添加滚动条