html怎么让li平补,CSS补充

关于边框的拓展

1.可以单独的设置某一个边框的样式。

#box1{

width: 100px;

height: 100px;

border:1px red solid;

border-right-color: blue;

}

image.png

#box2{

width: 100px;

height: 100px;

border-top: 2px green solid;

border-bottom:2px blue solid;

border-right: 5px red dashed;

border-left: 4px black dashed;

}

image.png

2.可以设置边框四角的弧度。

#box3{

width: 200px;

height: 100px;

border:1px red solid;

border-radius: 10px;/*默认四个角的弧度都是10px*/

/*border-radius: 10%;角的弧度是宽高的10%*/

/*border-radius: 10px 20px 30px 40px;分别设置四个角的弧度*/

}

image.png

3.可以设置边框的阴影

#box4{

width: 200px;

height: 100px;

border:1px red solid;

border-radius: 10px;

box-shadow: 5px 5px 15px red;

}

image.png

内边距padding

元素中的内容与该元素边的距离

1.padding:50px：四周边距都是50像素。

2.padding:10px 50px：上下边距10像素，左右50像素。

3.padding:10px 10px 15px：第一个参数代表上，第二个参数代表左右,第三个参数代表下。

4.padding:10px 10px 15px 20px：第一个参数代表上，第二个参数代表右,第三个参数代表下,第四个参数代表左。

也可以单独设置

padding-left、padding-right、padding-top、padding-bottom

#box {

width: 200px;

height: 200px;

border: 2px solid red;

}

#box1 {

width: 500px;

height: 500px;

border: 1px solid red;

/*

* padding:50px;

* 四周边距都是50px

*

* padding:10px 50px;

* 第一个参数代表上下，第二个参数代表左右

*

* padding:10px 10px 15px;

* 第一个参数代表上，第二个参数代表左右,第三个参数代表下

*

* padding:10px 10px 15px 20px;

* 第一个参数代表上，第二个参数代表右,第三个参数代表下,第四个参数代表左

*

* padding-left:10px;

*

* */

padding:50px;

}

a{

text-decoration: none;

border: 1px solid red;

padding: 5px 20px;

}

看看我和边框的距离(没有设置padding)

再看看我和边框的距离(设置了padding)。

文字或其它与边框的距离称之为内边距

百度

内联样式没有宽高，但是可以控制内边距控制宽高

image.png

外边距

以下图为例：首先清空body的margin(外边距)，再观察元素与body的距离。

/*内边距和外边距用法完全一样*/

div{

width: 100px;

height: 100px;

border: 1px solid red;

/*padding: 10px;*/

margin: 10px;

}

/*p标签自带外边距*/

/*body标签也有内边距*/

/*在开发中一般都要做样式重置*/

/*清空所有元素的外边距、内边距*/

*{

padding: 0;

margin: 0;

}

ul,dl,ol{

list-style: none;

}

a{

text-decoration: none;

}

hduhwoiahdo

iwhaoidh

hduhwoiahdo

iwhaoidh

image.png

通过外边距设置水平居中

#box{

width: 500px;

border: red 1px solid;

text-align: center;

/*auto：自适应*/

margin: 50px auto;

}

#box2{

width: auto;

height: 500px;

border: red 1px solid;

margin: 0 auto;

}

#box3{

width: 500px;

height: 50px;

border: blue 1px solid;

text-align: center;

margin: 10px auto;

}

看看我在那里，再看看我的边框在哪里

image.png

外边距存在的问题

1.水平方向不存在叠压问题，两个元素水平距离取两个元素左右margin值之和。

2.垂直方向存在叠压问题，取上、下margin值得最大值。

3.在嵌套中，margin存在传递问题。当自己元素有上外边距时，父级元素没有外边距，且该父级元素与该子级元素相邻(紧挨着)，会造成该父级元素产生上外边距。

margin的传递问题的解决方案：给父级元素加上外边框或添加内边距。

样式的继承问题

例：父级元素设置宽，颜色等，子级元素没有设置宽，颜色等，子级元素同样拥有父级元素的样式。

div{

color: red;

}

看看我的颜色，我继承我的父级元素的样式

背景

解释：

background: url(../img/11.ico) no-repeat red 100px 10px;

背景有背景图片，图片不需要重复平铺，多出的部分用红色填充，图片的位置在(x,y轴)100px 10px位置。

image.png

元素分类

元素除了块元素(block)、内联元素(inline)之外，还有内联块(inline-block)

通过display属性重置元素类别。

display:none 从文档流中消失(层级提高)

内联元素是没有宽高的，但是内联元素通过display:inline-block可以使内联元素拥有块元素的特性，可以拥有宽高。

块元素是独占一行的，但是块元素通过display:inline-block可以使块元素拥有内联元素的特性，可以不独占一行。

元素分类

div{

width: 100px;

height: 100px;

background: #0067C3;

display: inline-block;

/*display:none，从文档流中消失*/

}

111

222

image.png

浮动

浮动一般使用在页面布局中

加入浮动float也可以让块元素并排出现，浮动元素会脱离文档流，提高层级，如果父级元素不设置高度：子级元素撑起高度，会造成父级元素塌陷

父级元素塌陷的解决办法：

父级元素塌陷了

#box{

border: 1px solid blue;

/*父级元素不设置高度，用子集元素撑开高度*/

}

#div1,#div3,#div2{

height: 20px;

width: 20px;

border: 1px solid red;

float: left;

}

/*.clear-fix{

能够防止父级塌陷，如果父级左右都有浮动的话，就改为clear：both

clear: left;

}*/

image.png

解决方案

.clear-fix{

能够防止父级塌陷，如果父级左右都有浮动的话，就改为clear：both

clear: left;

}

#box{

border: 1px solid blue;

/*父级元素不设置高度，用子集元素撑开高度*/

}

#div1,#div3,#div2{

height: 20px;

width: 20px;

border: 1px solid red;

float: left;

}

.clear-fix{

/*能够防止父级塌陷，如果父级左右都有浮动的话，就改为clear：both*/

clear: left;

}

image.png