盒子模型
常见的网页布局操作方式：盒子模型
传统盒子：适用于PC端的 固定|自适应|响应式 网页布局
BOX弹性盒子：适用与PC端|移动端 响应式网页 布局
FLEX弹性盒子：适用于移动端 响应式 网页布局
什么是盒子模型：
所谓盒子模型，就是将需要展示的数据，添加到盒子(标签)中，通过对盒子的定位，完成数据的定位展示，整个这个过程，称为盒子模型网页布局！
commponent 导航栏组件
| margin: o padding |
清除内外边距 |
| height: 500px; width: 500px |
设置宽度高度单位像素 |
| border: dashed dotted dashed solid |
边框线: 长虚线 断虚线 蚂蚁线 实线 |
| margin 50px auto margin:auto; margin-top bottoom顶部边距 margin-lift margin-right |
外边距：上 左右：居中 |
| padding: 40px; padding-left |
内边距：上下左右都为40像素 |
| border-radius：8px; 或 50% |
设置边框边角半径为像素 50%盒子设置为圆 |
| background: orange; background-color |
设置背景色 |
| background-image: url(); 背景图片 |
添加图片 |
| background-repeat：repeat-x, repeat-y no-repeat |
平铺
不平铺 |
| background-position: 20px 20px |
设置位置 |
| float: left; right |
左浮动 右浮动 |
| clear:both; |
清除浮动 |
| nth-of-type(num) |
序号选择器|序列选择器 选择第几个标签 |
| text-align: center |
左右居中 |
| line-height 80px |
上下居中 |
| text-decoration: none; |
取消超链接下滑线 |
| href=”#” |
设置超链接 #号可以代替链接 |
| Overflow:hidden 用来设置标签 |
溢出：隐藏 |
| Background-position: 1px 2px; |
背景图片挪动 |
background: url(./images/tubiao1.png) no-repeat;
|
添加背景图片
|
#xiaoqu .xiaoqu-name:hover { background-color:#8f8f8f; color: #fff; } |
鼠标触发效果 |
| List-style:none; |
关闭ul标签的小黑点 |
| <link rel=”” href=”./css/demo02.css”> |
引入外部的css样式文件 |
|
|
|
| 文本样式 |
|
| Font |
汇合样式；可以同时修改字体 字号 加粗 |
| Font-family |
字体样式修改 |
| Font-size |
字号修饰样式 |
| Font-weight |
加粗修饰样式 |
| Color |
字体颜色 |
| Font-style:italic |
斜体 |
| text-align: center; |
字体居中 |
| Line-height:200px |
上下居中 |
| Overflow:hidden |
溢出标签的内容：隐藏 |
| 常见样式 |
|
| Width |
宽度 |
| Height |
高度 |
| background-image: url(“./image/123.jpg”) |
添加背景图片 |
| Background-position: -200px -200px |
设置背景图片位置 |
| Border: solid 1px red; |
加边框 |
| Border-radius:5px; |
圆角 |
| Border-radius:50% |
圆 |
| 标签类型转换 |
Display：inline/inline-block/block 行标签、行级块标签、块标签 |
行标签inline：标签前后不换行，标签不能设置宽度和高度
行内块标签 inline-block：标签前后不换行，标签可以设置宽度和高度
块标签 block：标签前后自动换行，标签可以设置宽度和高度
背景样式
| 背景颜色 |
background-color:red;将背景颜色设为红色 |
| 背景图片 |
background-image:url(图片路径); 将背景设为一张图片 |
| 背景位置 |
Background-position:x y; 设置背景图片的位置 |
| 边框 |
border:1px red solid; 将边框设为红色1像素的实线 |
| 上下左右边框 |
border-left:1px red solid; 其他方向类似 |
| 边框颜色 |
border-color:red; 将边框设为红色 |
| 边框粗细 |
border-spacing:2px;将边框设为2像素。 |
| 背景图片平铺 |
Background-repeat:repeat-x/repeat-y/no-repeat, x轴平铺，y轴平铺，不平铺 |
| 标签元素的定位 |
样式：position 四种定位样式 |
| 默认 |
Position: static; 相对于浏览器或者父元素的定位margin定位 |
| 相对 |
Position: relative; margin |
| 绝对 |
Position: absolute; 脱离HTML文档，独立定位 top|left |
| 固定 |
Position: fixed; top|left相对于浏览器固定位置 |
| 背景居中 |
Margin: auto |
| 背景透明度 |
opacity:0.9 |
默认定位方式：相对于浏览器或者父类元素左上角的坐标进行定位
相对定位： 相对于父类元素的左上角