笔记 || CSS

# CSS 盒子模型(Box Model)

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

笔记 || CSS_第1张图片

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_第2张图片

 

# CSS Display - 块和内联元素

笔记 || CSS_第3张图片

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

 

# CSS Position(定位)


   笔记 || CSS_第4张图片

        


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

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




 
菜鸟教程(runoob.com) 



这是一个没有定位的标题

这个标题是根据其正常位置向上移动

注意: 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。

笔记 || CSS_第5张图片



笔记 || CSS_第6张图片

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

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


笔记 || CSS_第7张图片笔记 || CSS_第8张图片

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

 

# CSS 布局 - Overflow

笔记 || CSS_第9张图片

笔记 || CSS_第10张图片

 

# 清除浮动 - 使用 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 */

你可能感兴趣的:(笔记)