css样式布局

admin管理员组

文章数量:1794759

css样式布局

css参考手册（菜鸟教程地址）：www.runoob/cssref/css-reference.html sass变量（菜鸟教程地址）：www.runoob/sass/sass-variables.html 响应式布局（菜鸟教程地址）：www.runoob/cssref/css3-pr-mediaquery.html 响应式布局（菜鸟教程地址）： 移动端适配

防御试CSS：防御试css地址

CSS单位：CSS单位详解地址1

Flex布局教程地址1(语法篇)：www.ruanyifeng/blog/2015/07/flex-grammar.html Flex布局教程地址2(实例篇)：www.ruanyifeng/blog/2015/07/flex-examples.html css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解：blog.csdn/m0_37058714/article/details/80765562 css解决高度自适应问题（使用flex）：blog.csdn/wenxiukeke/article/details/87165182

CSS Grid网格布局教程地址：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” 具体请查看菜鸟教程: 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