笔记 || CSS

# CSS 盒子模型(Box Model)

当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，完整大小的元素，还必须添加内边距，边框和边距

height、width：Content的高度和宽度

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

 

# 边框-简写属性

border: border-width border-style(required) border-color

border:5px solid red;

 

# CSS 轮廓（outline）

 

# CSS Display - 块和内联元素

  ！假如要设置一些元素在同一行，要将这些元素都设置为内联元素，而不是设置容器行为内联元素

 

# CSS Position(定位)

---

   

        

---

h2.pos_left
{
	position:relative;
	left:-20px; /*从元素的原始左侧位置减去 20 像素*/
}
h2.pos_right
{
	position:relative;
	left:20px; /*从元素的原始左侧位置加上 20 像素*/
}

    ！移动相对定位元素，但它原本所占的空间不会改变

 
 



这是一个没有定位的标题
这个标题是根据其正常位置向上移动
注意: 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。

---

---

   position为sticky，top为0 时窗口滚动时表现为relative定位，即元素随着上下移动，当元素向上移动到达顶部时，表现为fixed定位，再向上滚动窗口元素固定再顶部不动

效果（菜鸟教程）https://www.runoob.com/try/try.php?filename=trycss_position_sticky

---

more：菜鸟教程 https://www.runoob.com/css/css-positioning.html

 

# CSS 布局 - Overflow

 

# 清除浮动 - 使用 clear

  元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性，clear 属性指定元素两侧不能出现浮动元素。

 

# CSS 布局 - 水平 & 垂直对齐

# 要水平居中对齐一个元素(如

), 可以使用 margin: auto

  如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

# 文本在元素内居中对齐，可以使用 text-align: center

# 垂直居中对齐

  1、padding-top

  2、令容器height = line-height

  3、子元素样式

/*子元素左上角顶点放在容器中心位置*/
position: absolute;
top: 50%;
left: 50%;
/*向左边和上边移动子元素高度和宽度的一半*/
transform: translate(-50%, -50%);
/*-ms-transform：  IE 9 */
/*-webkit-transform：  Safari and Chrome */