css三大特性,CSS三大特性详解

css三大特性,CSS三大特性详解详细介绍

本文目录一览：CSS三大核心-浮动

页面布局要学习三大核心： 盒子模型， 浮动 和 定位 .学习好盒子模型能非常好的帮助我们布局页面.网页布局过程：网页布局的核心本质： 就是利用 CSS 摆盒子 。

浮动 浮动的元素可以在左右移动，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。浮动的元素离普通流。如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动元素向下移动，直到有足够多的空间。

清除浮动一：给标准流的父元素强制给一个合适的高度height 解决：浮动元素影响后面元素标准流位置和贴边。 问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。

overflow 方法在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，因为他不需要额外元素。

常见的有float：left或者float：right。简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。

清除浮动并不是指清除浮动元素本身的浮动，而是在浮动元素的外面（前面或后面）进行清除，也就是清除浮动元素对其他后续元素的影响。

简述css的三大特性。

1、CSS层叠性 说明层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。

2、层叠性 我理解中的层叠式覆盖的意思。如果有相同的两个样式，只能选择一个，则遵循就近原则。① 样式冲突： 遵循就近原则。实例：路飞div {color： red；}div {color： pink；} 效果：② 样式不冲突： 不会发生层叠。

3、CSS 有 非常重要的 三个特性：层叠性、继承性、优先级。相同选择器 给设置 相同的样式，此时一个样式就会 覆盖（层叠） 另一个冲突的样式。层叠主要解决样式冲突的问题 。

CSS-03-三大特性+盒子模型

1、所谓 盒子模型 ：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

2、CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。

3、CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。

4、CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

5、css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。

【前端CSS】CSS行高(line-height)及文本垂直居中原理

1、③结合以①②中的两个等式：当设置line-height等于height时，字符大小就是内容大小，而上下相同的行间距就相当于上下相同的padding。故，div中的内容居中=p元素的字符(撑满容器)居中。

2、line-height 属性的取值和 height 属性的取值是相同的，这样内部的一行文本就实现垂直居中。在CSS中，line-height 属性的调整就是以这条线为标准线的。

3、行高line-height与文字高度height设为一样大，文字就垂直居中了只是一种效果上的表现。这个效果跟对象的基线有关系，所以，当两者值一致的时候，并不见得会出现垂直居中的效果。

4、line-height属性使文字垂直居中。使用绝对定位和负外边距对块级元素进行垂直居中(已知元素的高度)。使用绝对定位和transform进行垂直居中（未知元素高度）。使用flex布局。

5、行高，其实就是内容所占的上下距离。当上下距离等于容器高度时就是所谓的垂直居中。可以用于图片垂直居中。

6、设定行高(line-height)，设置伪元素：before，absolute+transform，设置绝对定位。设置行高要注意父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。