CSS世界
1. 概念
-
三种盒子
display: block; 外在的“块级盒子”和内在的“块级容器盒子” display: inline-block; 外在的"内联盒子"和内在的"块级容器盒子" display: inlinel; 内外都是“内联盒子” 理解： display: block; => display: block-block; display: table; => display: block-table; -
两种尺寸
内在尺寸：尺寸由内部元素决定 外在尺寸：尺寸由外部元素决定 -
"鑫三无"准则
无宽度：少了代码，少了计算，少了维护 无图片 无浮动 -
格式化宽度
position:absolute 和 position:fixed 中的left/right 和 top/bottom 同时存在的时候 定位祖先元素宽度：1000px,设置子级top: 20px; left: 20px;则子级宽度1000-20-20=960 -
自定义滚动两种原理
借助原生滚动：scrollLeft/scrollTop 根据内部元素尺寸和容器关系，修改内部元素的位置实现滚动效果 -
浏览器渲染的原理
下载文档内容 加载头部的样式的资源 从上而下，自外而内的顺序渲染DOM -
替换元素和非替换元素
替换元素：内容可以被替换 案例：<img src="1.jpg"> 1.jpg被替换为2.jpg 包含：img,video,audio,iframre,input,textarea,object 特性： 1. 内容的外观不受页面上CSS的影响，如果更改，需要appearance或者浏览器暴露的一些样式接口::ms-check{}等 2. 有自己的尺寸：默认300*150 -
margin和padding特性
针对内联元素，设置padding，会增大padding的样式空间，但是不会占据空间 比如 a { padding: 50px; background: red; } a标签的红色范围增大了，但是不会影响到布局结构 使用： 1. 登录 | 注册，使用padding+border设置分隔符，能控制边框厚度大小 2. 针对非替换元素的内联元素，margin，padding，border都不计算高度，但是会发生渲染 3. 针对padding：padding百分比（无论水平和垂直）都是针对宽度计算 原因：height大多数计算值为0，跟摆设无区别，再加上CSS默认是水平流，计算值会一直有效 4. 内置padding的标签 input，textarea，button，select 案例： 1. 首页头图固定高度，在大屏OK，小屏幕显大，使用padding进行控制(实现5:1的头图) .box { padding: 10% 50%; position: relative; } .box > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } 2. 使用padding实现三横和双层圆效果 .icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: content-box; } .icon-dot { display: inline-block; width: 100px; height: 100px; padding: 10px; border: 10px solid; border-radius: 50%; background-color: currentColor; background-clip: content-box; } -
margin概念
// 1. margin支持负值 // 2. 两端对齐：不用nth-of-type方式 ul { margin-right: -20px; } li { margin-right: 20px; } // 3. margin合并 块级元素，不包括浮动和绝对定位元素 只发生在垂直方向：不考虑writing-mode的情况 // 4. 阻止margin-top合并 父元素设置为块状格式化上下文元素 父元素设置border-top值 父元素设置padding-top值 父元素和第一个子元素之间添加内联元素进行隔离 // 5. 阻止margin-bottom合并 父元素设置为块状格式化上下文元素 父元素设置border-bottom 父元素设置padding-bottom 父元素和最后一个子元素之间添加内联元素进行隔离 父元素设置height/min-height/max-height // 6. 为什么有margin合并 <p>第一行</p> <p></p> <p></p> <p>第N行</p> <p>第一行</p> <p>第N行</p> 上述效果一样，如果没有margin合并，则第一个案例中间会出现很多空行，很丑 // 7. 如果让一个div到右侧，不用浮动 margin-left: auto; // 右对齐 margin-right: auto; // 左对齐 margin: 0 auto; // 居中 // 8. 对于内联替换元素，垂直margin有效，并且没有margin合并问题（图片无合并情况） -
border属性
1. border-color默认颜色就是color色值（outline，box-shadow，text-shadow同理） 2. 案例： 1. 鼠标移入文字（文字有边框），鼠标移入，改变文字和边框颜色，可以利用上述第一个特点 只设置边框厚度，样式，不设置颜色，设置color颜色，这样鼠标移上去，改变color，字体和边框颜色一起改变 -
内联元素与流
1. 不同的字体在行内盒子中的位置是不一样的
2. 技巧
-
文字少=>居中 ，文字多=>居左显示
<div class="box"> <p class="content"></p> </div> .box { text-align: center; } .content { display: inline-block; text-align: left; } -
宽度分离原则
// no .box { width: 100px, border: 1px solid red; } .box { width: 100px; margin: 10px; padding: 10px; } // yes .parent { width: 150px; } .child { margin: 10px; padding: 10px; border: 1px solid red; } 优点：自动计算宽度，可维护 缺点：增加HTML标签嵌套，增加页面渲染和维护成本 解决宽度分离的原则： box-sizing: border-box; 缺点： 1. 不喜欢这种风格，程序员的尿性 2. 产生没必要的消耗：对于普通内联元素，box-sizing对他们无影响，对于search类型的input搜索框也是没有必要的消耗（待验证） 3. 不能解决所有的问题：当元素没有水平margin的时候，box-sizing才能真正无计算 总结：box-sizing: border-box解决替换元素高度自适应问题 input, textarea, img, video, object { box-sizing: border-box; } -
高度100%
1. 普通 html, body { height: 100%; } .box { height: 100% } 注意：.box的100%是针对body的content box计算 2. absolute/fixed定位 .box { position: absolute; height: 100%; } 注意：.box的100%是针对父级的padding box计算
-
min-width/min-height和max-width/max-height的tips
min-width/min-height: 初始值auto max-width/max-height: 初始值none 特殊规则： 1. 超越!important：max-width会覆盖width（即使width后有!important） 2. min-width和max-width同时存在，且min-width>max-width的时候，以min-width为准 技巧： 问题：用css实现向下滑动的效果的时候，由于下滑元素的高度动态生成，无法确定，从0到auto的计算无法形成动画效果和过渡效果 解决：使用max-height 将max-width设置到足够大，那么当滑动到真实高度的时候，动画也能停止，按真实高度停止 注意事项：设置高度足够安全的最小值，防止延迟 -
针对图片异步加载的tips
<img> // 注意：此处不写src属性，写了之后在某些浏览器下依然有请求 img {visiblity: hidden;} img[src] {visiblity: visible;} 针对图片进行全局设置： img { display: inline-block; } 在css的世界，图片资源的固有尺寸是无法改变的，你能看到改变，其实是因为设置了CSS属性，现在CSS3有了object-fill属性，那是后续在研究的内容 -
正在加载中...
正在加载中<dot>...</dot> dot { display: inline-block; height: 1em; line-height: 1; text-ailgn: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @Keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } } 注意： 1. 为什么用dot： dot在IE8-直接展示， 2. ::before设置display: block;在高版本浏览器下原来的3个点推倒最下面，不影响3行内容展示，::after难实现 3. 3个点在第一行的目的兼容IE9浏览器，IE9识别dot，但是不支持animation \A换行不区分大小写，\D也可以换行
网友评论