![6fbc340fd3641c7277b66935b87b3428.png](https://i-blog.csdnimg.cn/blog_migrate/5f61b175c3ff75336873ccb502146189.jpeg)
Ⅰ border边框
- 同时设置四条边的边框
- border:边框的宽度 边框的样式 边框的颜色
.
![6fcbba90cd84b3fd3200f1241c513c9b.png](https://i-blog.csdnimg.cn/blog_migrate/7dcbaa93018cf39b99cd058c93ea628c.jpeg)
- 分别设置四条边的边框
border
![75c7adaaf34b383be87ae1d316975bc5.png](https://i-blog.csdnimg.cn/blog_migrate/8dede02b83ca31071db84abb69ed6456.jpeg)
- border-radius -- 盒子倒角
单独设置一个角:数值越大,弧度越大
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
缩写设置
border-radius: 20px;/* 所有角设置相同值 */
border-radius: 20px 10px 10px 20px; /* 顺时针顺序:上左 上右 下左 下右*/
百分比设置
border-radius: 50%;
椭圆圆弧设置
border-radius: 25%/50%; /* 前面一个值代表水平方向的半径占总宽度的,后面一个值代表垂直方向 */
<style>
.box3 {border: 1px solid blue;
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;}
<style>
<div class="box3">268工程</div>
![f1c1435c83c5ecb41ad8da4fd6c104d7.png](https://i-blog.csdnimg.cn/blog_migrate/e9efa1576c08ea15e8bf88893450d642.jpeg)
Ⅱ padding内边距
- 边框与内容的距离就是内边距
- 非连写
- padding-top:20px;
- padding-right:20px;
- padding-bottom:20px;
- padding-left:20px;
<style>
![45d0dfdcd3fc08f9e93093c30611958f.png](https://i-blog.csdnimg.cn/blog_migrate/fad80414b79315a2f7f4f4fa86101744.jpeg)
- 连写
- padding:上 右 下 左;
- 给标签设置内边距后,标签内容占有的宽度和高度会发生变化,设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小,那就在用宽高减掉padding对应方向的值
- padding是添加给父级的,改变的是父级包含的内容的位置
- 内边距也会有背景颜色
<style>
![29491aaa942a9b9a2c3be1c9c0a0eec9.png](https://i-blog.csdnimg.cn/blog_migrate/e377b7a1cf455256fb953712500a01ca.jpeg)
Ⅲ margin外边距
- display: inline-block -- 块级标签变成行内块级
- 标签与标签之间的距离就是外边距
- 非连写
- margin-top:20px;
- margin-right:20px;
- margin-bottom:20px;
- margin-left:20px;
- 连写
- margin:上 右 下 左;
- 外边距的那一部分是没有背景颜色的
- 外边距合并现象
- 在默认布局的水平方向上,默认两个盒子的外边距会叠加
- 而在垂直方向上,默认情况下两个盒子的外边距是不会叠加的,会出现合并现象,谁的外边距比较大,就听谁的
.
![20c4a627dd59d69caaaf270a594e6d27.png](https://i-blog.csdnimg.cn/blog_migrate/c1c70833264bf04c985625add41b8c68.jpeg)
Ⅳ 内边距vs外边距
- 在实际开发中,一般情况下需要控制嵌套关系盒子之间的距离
- 应该首先考虑padding
- 其次再考虑margin
- margin本质上是用于控制兄弟直接的关系的,padding本质才是控制父子关系的关系
- 如果两个盒子是嵌套关系,那么设置了里面一个盒子顶部的外边距,那么外面一个盒子也会被顶下来
- 如果外面的盒子不想被遗弃顶下来,,那么可以给外面的盒子设置一个边框属性
Ⅴ 盒子居中与内容居中
- 让一行内容在盒子中水平且垂直居中
- 水平居中
- text-align: center;
- 只能让盒子中存储的文字、图片水平居中
- 如果想让盒子自己相对于父元素水平居中,需要用到
- margin: 0 auto;
- 垂直居中
- line-height: 500px; -- 需要计算
- 让多行内容在盒子中垂直居中(水平居中与单行内容一样)
- 让行高与盒子高度一样,只能让一行内容垂直居中,如果想让多行内容垂直居中
- 比如下面这种,想让div中的多行内容垂直居中,一看div中的文字是两行,每一行的行高为20,加起来就是40,80-40=40,需要让文字距离顶部pading为20,底部padding为20
- height: 80px;
- line-height: 20px;
- padding-top: 20px;
- padding-bottom: 20px;
- box-sizing: border-box;
- 水平居中
div
![7ac6d3e810d96de887142fd576c1880e.png](https://i-blog.csdnimg.cn/blog_migrate/b0b28e9ba96d03b7a34ba362d829b171.jpeg)
Ⅵ break-all防止文字溢出
- word-break: break-all; -- 自动换行,防止文字溢出
- 控制自动换行,且允许在单词内换行
<style>
![ecfa706712cb05d7220b415f27c86a66.png](https://i-blog.csdnimg.cn/blog_migrate/361fb3e53ada96b5770f4ba8d3f20db8.jpeg)
Ⅶ 清除默认边距
- 浏览器会自动附加边距,在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
- 编写代码之前的第一件事情就是清空默认的边距
- * { margin: 0px; padding: 0px; }
- 通配符选择器会找到(遍历)当前界面中所有的标签,所以性能不好
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0} -- 将常用标签全部写一遍
<style>
![7acf0db2762680d653f443e79fcc06b2.png](https://i-blog.csdnimg.cn/blog_migrate/8a78dc215a43eedda439290b25db8dcb.jpeg)