触发怪异模式的条件
如果想设置滚动条样式怎么办?
三列布局
第一种 绝对定位
html
css
利用 vw 和 calc()?
float方式,
要注意html的顺序
html
scss
参考 三列布局实现4种方法
双侧翼,还真是学习了.
这样能够保证先加载中间的主要内容
html
scss
不用float 用display : inline-block行不行?
这才发现 float 和 inline-block 有个挺大的区别
float 时, left 通过 margin-left 向左移动时, right 会被 mid卡主.
inline-block 时, left通过margin-left 向左移动时, right会跟着left 一起移动.
双侧翼很巧妙!
css每个单句都不怎么难, 但复合使用不太好掌握.
圣杯模式
html
scss
这个就更巧妙了,我真实佩服的五体投地.
首先, width 和 margin 的百分比都是 针对父级的宽度, 这个宽度是 content-width
不包括padding部分.
所以根据padding 预留出左右的空间.
根据float 的特性, 左右会折行到下一行,
通过margin-left 可以让float元素 之间重叠, 让他们回到同一行.
但重要的是, left 的移动,right不会跟着移动,这和inline-block 不同.
最后用relative最后再调一次位置.
实在是精妙.
css3 关于position 感觉非常坑人
关于 百分比的基准值,这里有写.
用flex
html
scss
确实很方便, 问题来了, 如果我想让mid 先加载怎么办?
利用order
html
scss
设置在子元素,伸缩项目上.
多余的部分会进行拉伸填充,
每个子元素的默认是为0, 默认是不会拉伸填充,不变形.
如果设置,则按照比例,分割空间分配.
也就是会经过变形不超出父级.
默认值为 1, 按照该比例,切割子元素,
如果我们想让他们不变形且不换行,
可以把子元素的shrink 值都设置为0
这就是视频和文字的差异了,
因为用文字表达要准确,所以只能说的不是人话,
实际上核心逻辑非常简单.
刚开始,我不明白这个属性有什么用处,
后来发现三列布局时,通过html顺序和 order配合可以调整加载顺序.
默认值为 0
如果我们想设置子元素的主轴方向的属性,
可以用 grow, shrink, base ,order, 可以调整主轴的大小和位置
如果想谁知子元素的侧轴方向的属性,
可以用aline-item,
父元素上的 flex-direction flex-wrap justify-content aline-item aline-content
这几个属性,都是用来进行布局的.
非常的,,嗯强大.
我们讲主轴设为 x轴, 设定多行的情况,
讨论一下 aline-item 和 aline-content的效果区别.
之前我只是笼统的知道 aline-item 作用在侧轴只有一行的情况.
aline-content 作用在侧轴多行的情况.
而实际上 aline-item 对 侧轴多行的情况也是有效果的,只是不一样.
html
当值为strech时, 两个效果是一样的.
注意strech 如果想要有效果, 就必须让heigth(侧轴宽度) 不是固定宽度,否则失效.
除了这三个之外, aline-content 还有两个属性,
与justify-content 非常类似,
如果父级 relative 子级当中有 absolute的元素,
则该子元素不受到 flex布局的影响.
flex布局时会排除该元素进行布局
至此,我觉得flex进行布局,那是真的强.
主轴和侧轴的各自控制属性基本就全了.
侧轴唯一比主轴差的属性,应该就是 shink 和 order属性了.
好课外思考就到这里, 继续看视频
学习导航
1、css中的长度与颜色
2、css中的文字属性
3、css中的文本属性
1、文字样式属性
font-family 字体属性
作用：元素内文字以什么字体来显示
语法：font-family:[字体1],[字体2],[......]
说明：含空格字体名和中文，用英文引号（"）括起；多个字体用英文逗号隔开；引号嵌套，外使用双引号，内使用单引号。
font-size 文字大小
作用：元素内文字大小
语法：font-size:绝对单单位，相相对单位
color 文字颜色
语法：颜色名|十六进制|RGB
font-weight 文字粗细
语法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900
说明：默认值：normal 400等同于normal,而700等同于bold
font-style 文字样式
作用：为元素内文字设置样式
语法：font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜（基本不用）
font-variant 字体变形
作用：设置元素中文本为小型大写字母
语法：font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽
font 属性简写
语法：font:font-style font-variant font-weight font-size/line-height font-family
说明：值之间空格隔开，注意书写顺序。
2、CSS文本样式
text-align
作用：设置元素内文本的水平对齐方式
语法：tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐
注意：该属性对块级元素设置有效
line-height
作用：设置元素中文本行高
语法：line-height:长度值 | 百分比
说明：一行文字的高度，行高指文本行的基线间的距离
文字基线
注意：基线并不是汉字文字的下沿，看图理解自行理解
行高和行距
行高：基线到基线的距离
行距：底线到顶线的距离
注意：看图自行理解
行框和行内框
注意：看图自行理解
vertical-align
作用：设置元素内容的垂直方式
语法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比
注意：看图自行理解
text-indent 首行缩进
3、文本样式属性
text-transform: capitzlize 首字母大写 | uppercase 字母大写 | lowercase 字母小写 | none 正常
text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常
综合实操案例
如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
