- 列表样式
- 可以更改列表中点的样式或者去掉点
- 复习之前内容
#nav{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
}
ul li{
height: 30px;
/*列表的点 none:去除 circle:空心圆 decimal:数字123. square正方形*/
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
}
a:hover{
color: orange;
text-decoration: underline;
}
- 背景
- 背景颜色、图片
- 渐变背景
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*设置背景:默认为平铺*/
background: image("xxx/xxx.jpg");
/*横向平铺和纵向平铺不平铺*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
- Grabient是一个在GitHub上开源的项目,可以获取各种渐变背景的CSS代码。
盒子模型
元素大小=margi+border+padding+内容
- margin:外边距
- padding:内边距
- border:边框
- border
- 在最上方选择body标签可以进行边距、字体等的初始化
/*设置默认边距为0 初始化*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
from{
background: blue;
}
#box{
/*border:粗细,样式,颜色*/
width: 300px;
border: 1px solid red;
/*外边距*/
padding: 0;
}
/*结构伪类选择器搭配子类选择器*/
/*border: solid实线,dashed虚线*/
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed black;
}
div:nth-of-type(3) input{
border: 3px dashed black;
}
- margin&padding
- 可以用来居中
#box{
/*可以是1、2、4个参数,1个参数代表上下左右边距一样
2个参数则分别为上下、左右边距,4个分别为上、下、左、右
auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/
margin: 0 auto;
}
- 圆角边框
- 实现按钮等元素的圆角
- 绘制圆形扇形
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*边框圆角大小:一个参数则四个角相等
两个参数则左上右下一样,剩下两个一样
四个参数则从左上开始顺时针*/
border-radius: 50px 20px 10px 5px;
/*可以用来画圆,当圆角大小大于(高宽的一半加上边框粗细)就是圆*/
border-radius: 60px;
/*扇形需要三个角为0,另一个圆角大小为(两倍边框粗细加上div的边长)*/
}
- 盒子阴影
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
浮动
- 块级元素:独占一行 h1~h6 p div 列表…
- 行内元素:不独占行 span a img strong…
- 行内元素可以被包含在块级元素中,反之则不可以。
- display和float
div{
width: 100px;
height: 100px;
border: 1px red;
/*display: xxx; inline:变为行内元素 block:变为块元素
inline-block 块元素但是可以内联,在一行*/
display: inline;
/*浮动:float 左右浮动*/
float: right;
/*clear:不允许有浮动元素 both:两侧 right、lefe:左、右
none 默认 允许*/
clear: right;
}
- 父级边框塌陷问题
- 增加父级元素的高度:固定了父元素高度,就会被限制
- 在父级元素内最底部增加一个空的div块,清除两侧浮动:简单,但代码中应该尽量避免空div
- 在父类添加一个伪类:稍微复杂,没有副作用,推荐使用
#father{
border: 1px #000 solid;
height: 800;
}
.clear{
padding: 0;
margin: 0;
clear: both;
}
#father:after{
content: '';
display: block;
clear: both;
}
- overflow
- 如果块内内容大小超过了块所规定的大小,可以使用overflow来控制隐藏超出部分或者添加块内滚动条。
- 其中overflow:hidden;放在父元素中,可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。
#content{
width: 200px;
height: 100px;
/*overflow: ; hidden:超出部分隐藏 scroll:滚动条*/
overflow: hidden;
}
定位
- 相对定位
- 相对定位:position: relative;
- 相对于自己原来的位置进行指定的偏移,但是,在标准文档流中,仍然处在原来的位置不变(比如说最后一个div进行向下的偏移,并不会使得父级元素的大小向下扩展)
div{
/*相对于自己原来的位置移动*/
position: relative;
/*上下左右移动*/
top: -20px;
}
- 绝对定位
- 定位:基于xxx定位,上下左右
- 若没有父级元素定位,基于浏览器定位
- 如果父级元素有绝对或者相对定位,则基于父元素定位
- 在标准文档流中,原来的位置会被改变
div{
position: absolute;
right: 100px;
}
- 固定定位
fixed:相对于窗口定位
div{
/*固定定位fixed*/
position: fixed;
bottom: 300px;
left: 50px;
}
- z-index
- 图层堆叠
div{
/*设置图层,默认是0,在最底层*/
z-index: 10;
/*设置透明度 此下两句等价*/
opacity: 0.5;
filter: alpha(opacity=50);
}