css参考手册(菜鸟教程地址):https://www.runoob/cssref/css-reference.html
sass变量(菜鸟教程地址):https://www.runoob/sass/sass-variables.html
响应式布局(菜鸟教程地址):https://www.runoob/cssref/css3-pr-mediaquery.html
响应式布局(菜鸟教程地址): 移动端适配
防御试CSS:防御试css地址
CSS单位:CSS单位详解地址1
Flex布局教程地址1(语法篇):https://www.ruanyifeng/blog/2015/07/flex-grammar.html
Flex布局教程地址2(实例篇):https://www.ruanyifeng/blog/2015/07/flex-examples.html
css弹性盒子-------桃园三兄弟之:flex-grow、flex-shrink、flex-basis详解:https://blog.csdn/m0_37058714/article/details/80765562
css解决高度自适应问题(使用flex):https://blog.csdn/wenxiukeke/article/details/87165182
CSS Grid网格布局教程地址:http://www.ruanyifeng/blog/2019/03/grid-layout-tutorial.html
1、弹性盒子
代码css: display: flex;
说明:父级div开启弹性盒子,子div会排成一行;
<div style="display: flex;">
<div style="background-color: red;">123</div>
<div style="background-color: blue;">456</div>
<div style="background-color: red;">789</div>
</div>
显示结果:
1.1、开启弹性盒子,使弹性盒子中的div在一行平均分配
css代码:
display: flex;
justify-content: space-between;
显示结果:
2、div中文本居中
div中文本水平居中: text-align: center;
div中文本垂直居中: line-height: div的高度值;
文本超出div,设置滚动条:
当内容超出div时,自动出现滚动条的条件:
1、内容必须在div中;
2、div要设置宽高;
3、overflow 设置 auto;
设置:
1、overflow:auto;
当内容宽度超出div宽度,或者内容高度超出div宽度,或者同时超出,会自动出现水平、或者垂直、或者水平和垂直滚动条;
2、overflow-x:auto;
当内容宽度超出div宽度,自动出现水平滚动条;
3、overflow-y:auto;
当内容宽度超出div高度,自动出现垂直滚动条;
注意:
设置好后会自动换行;
white-space:nowrap; 这个会强制文字在同一行显示
3、div的设置边框
css代码:
border: 1px #000000 solid;
<div style="border: 1px #000000 solid;width: 100px;height: 100px;"></div>
4、div定位
css代码:
父级容器(开启绝对定位):position: relative;
子容器(设置相对定位):position: absolute;
<!-- 这里在父容器中随意设置子容器的位置 -->
<div style="position: relative;">
<div style="position: absolute;">
</div>
</div>
5、页面布局自适应(响应式布局)
1、首先正常写样式布局
2、使用 “@media”
具体请查看菜鸟教程: https://www.runoob/cssref/css3-pr-mediaquery.html
// 正常样式
.biz-box-left {
width: 50%;
height: 400px;
margin-top: 10px;
}
// 当最大宽度1500px时,改变指定样式
@media only screen and (max-width: 1500px) {
// 将biz-box-left样式的宽度变为100%
.biz-box-left {
width: 100%;
}
}
更多推荐
css样式布局
发布评论