【CSS】学习记录

【CSS】学习记录

待完善
、行内式(内联样式)：<div style="color: red; font-size: 12px;"></div>
内部样式表(内嵌样式表)：<style type="text/CSS"></style>
外部样式表(外链式)：<link rel="stylesheet" href="index.css">
、基础选择器：标签选择器，类选择器，id选择器，通配符选择器*
、复合选择器：后代选择器(空格隔开),子元素选择器(>),交集选择器(.),并集选择器(,),链接伪类选择器(😃

、☆居中
text-align：盒子里面的文本内容水平居中,让行内元素和行内块居中对齐
line-height：行高基线到基线,单行文本在盒子中垂直居中对齐
line-height 要设置在font属性下面，否则无效
display:flex;布局方式让文字水平垂直居中
display: flex;
align-items: center; /* 侧轴对齐方式*/
justify-content: center; /* 主轴对齐方式 */
块级盒子水平居中：盒子必须指定宽度,左右的外边距都设置为auto
vertical-align 垂直对齐,只针对于「行内元素」或者「行内块元素」(图片文字基线对齐,垂直居中,顶部对齐)

、块级元素<div>、<p>、h1~h6、ul、ol、li
独占一行,高度,宽度,外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
p,h1~h6,dt里面不能放其他块级元素。
、行内元素<span>、<a>、strong、b、em、i、del、s、ins、u
☆高度、宽度直接设置是无效的。(变行内块display:inline-block即可改变大小)
默认高度就是它本身内容的宽度。
、行内块元素<img>、<input >、<td>
高度，行高，外边距以及内边距都可以控制。
默认高度就是它本身内容的宽度。

、盒子半透明 opacity:所有后代元素会随着一起具有透明性
、CSS三大特性：层叠性(就近原则),继承性,优先级
、优先级
继承或者* 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style=“” 1,0,0,0
每个!important 最重要的 ∞ 无穷大
、css学习三大重点： css 盒子模型 、 浮动 、 定位

、盒子模型
标准 w3c 盒子模型：包括 margin、border、padding、content
IE 盒子模型：content 部分包含了 border 和 pading
、如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
、外边距塌陷:
相邻块元素垂直外边距的合并：上面的元素有下外边距,下面的元素有上外边距,则垂直间距「取两个值中的较大者」
嵌套块元素垂直外边距的合并：两个嵌套关系的块元素，如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者
、盒子模型布局稳定性：优先使用宽度,其次使用内边距,再次外边距
、兼容问题考虑：
行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。

、浮动float：不占位置
改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙
、CSS布局三种机制：普通流(块独占一行,行内从左到右顺序排列),浮动(块一行显示),定位
、清除浮动（4种）：解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。<div style=”clear:both”></div>

、定位position
定位 = 定位模式 + 边偏移
静态定位(static),相对定位(relative),绝对定位(absolute不占位置),固定定位(fixed不占位置,浏览器可视窗口+边偏移,不随滚动条滚动)
、绝对定位的盒子不能通过设置margin: auto设置水平居中
left : 50%:让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;让盒子向左移动自身宽度的一半。
、一个行内的盒子，如果加了「浮动」、「固定定位」和「绝对定位」，不用转换，就可以给这个盒子直接设置宽度和高度等。
、元素的显示与隐藏
显示display: none (隐藏对象,不再保留位置,应用下拉菜单)
可见性visibility：hidden;(保留原有位置)
溢出overflow(清除浮动,隐藏超出内容)
、书写顺序
布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
、去除图片底侧空白缝隙：1.给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。2.给img 添加 display：block; 转换为块级元素就不会存在问题了

CSS3 新增

、圆角边框：border-radius: 50%;
、盒子阴影(box-shadow)不占用空间
、属性选择器(E[att]选择具有att属性的E元素)
、结构伪类选择器(常用于根据父级选择器选择里面的子元素)：
E:nth-child(n)匹配父元素中的第n个子元素E
、伪元素选择器(::before和::after创建一个元素，但是是属于行内元素)
before 和 after 必须有 content 属性
、滤镜filter
、calc函数（计算盒子宽度 width: calc 函数）
、transition过渡
、转换(transform)
、移动translate(不会影响到其他元素的位置)
、旋转rotate
、缩放scale
、@keyframes 动画名称 {0%{width:100px;} 100%{ width:200px; }}
、3D呈现：transform-style(控制子元素是否开启三维立体环境)
transform-style: flat 子元素不开启3d立体空间 默认的
transform-style: preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要

扩展应用：
、精灵图Sprites
、字体图标iconfont
、鼠标样式cursor
、flex布局：当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
、媒体查询@media 可以针对不同的屏幕尺寸设置不同的样式