css(下)
css属性相关
宽和高
width属性用来设置宽度。height属性用来设置高度。其中块级标签才能设置宽度,内联标签的宽度有内容来决定。
字体属性
文字字体
font-family可以将多个字体名称作为一个‘回退’来保存。如果浏览器不支持第一个字体,则会尝试下一个字体。
字体大小
用font-size来设置字体的大小,格式如下:
p{ font-size: 14px; #字体大小 }
字重(粗细)
用font-weight设置字体的粗细。其中normal表示默认值,bold表示粗体,bolder表示更粗,lighter表示更细。
文本颜色
颜色属性是用来设置字体的颜色,通过css最经常的指定有以下几种:
①十六进制值:如#eeeeee;②颜色的名称:如red;③rgb:如rgb(128,128,128);④rgba(255,0,0,0.4),其中第四个值为alpha,也就是透明度,在0-1之间,越靠近1颜色越深。
文字属性
文字对齐
用text-align属性规定元素中文本的对齐方式。有以下几种对齐方式:①left:左对齐;②right:右对齐;③center:居中对齐;④ejustify:两端对齐;
文字装饰
用text-decoration属性来给文字添加特殊效果。有以下几种方式:①none:默认值,也就是什么装饰都没有;②underline:定义在文本下的一条线;③overline:定义在文本上的一条线;④line-through:穿过文本的一条线。常用格式:
a { text-decoration: none; #常用于去除a标签默认的下划线 }
首行缩进
p { text-indent: 32px; # 将段落的第一行缩进32像素 }
背景属性
/*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x:背景图片只在水平方向上平铺 repeat-y:背景图片只在垂直方向上平铺 no-repeat:背景图片不平铺
background-repeat:no-repeat 背景不重复*/
/*背景位置*/ background-position: left top;
边框
边框属性
①border-width:边框高度;②border-style:边框样式;③border-color:边框颜色。格式如下:
#i1{ border-width: 2px; borser-style : solid; borser-color : red; }
通常简写方式:
#i1 {
border:2px solid red;
}
边框样式
①none:无边框;②dotted:点状虚线边框;③dashed:矩形虚线边框;④solid:实线边框。
#i1 { border-top-style:dotted; #边框顶部样式 border-top-color: red; #边框顶部颜色 border-right-style:solid; #边框右部样式 border-bottom-style:dotted; #边框底部样式 border-left-style:none; #边框左部格式 }
将border-radius设置为长或高的一半即可得到一个圆形,可能实现圆角边框的效果。
display属性
用来控制HTML元素的显示效果。
值 | 意义 |
display:"none" | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:"block" | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:"inline" | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性不会有什么影响。 |
display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但照样会占用空间,会影响到布局。
display:"none":可以隐藏某个元素,元素隐藏以后不会占用到空间,不影响布局。
CSS盒子模型
- margin(外边距):用于控制元素与周围空间的距离。
- padding(内填充):用于控制内容与边框的距离。
- Border(边框):围绕在内边距和内容外的边框。
- Content(内容):盒子的内容,显示文本和图像。
margin外边距
.margin-test { margin-top:5px; #上 margin-right:10px; #右 margin-bottom:15px; #下 margin-left:20px; #左 } 推荐使用简写: .margin-test { margin: 5px 10px 15px 20px; #上,右,下,左 margin: 5px 10px 15px; #上,左右,下 margin: 5px 10px; #上下,左右 margin: 5px ; #上下左右 }
常见居中 .mycenter{ margin: 0 auto; }
padding内填充
float
在CSS中,任何元素都是可以浮动的。浮动的元素会生成一个块级框。关于浮动有以下两种特点:
1)、浮动的框可以向左或者向右移动,直到它的边缘碰到包含框或者是另一个浮动框的边框才会停止。
2)、由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
①left:向左浮动;②right:向右浮动;③none:默认值,不浮动。
clear
clear属性规定元素的哪一册不允许其他浮动元素。
值 | 属性 |
lelf | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
注意:clear属性只会对自身起作用,而不会影响其他元素。
清除浮动
清除浮动的副作用(父标签塌陷的问题)
主要有三种方式:
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法(使用较多):
.clearfix:after { content: ""; display: block; clear: both; }
overflow溢出属性
值 | 描述 |
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
定位(position)
static
static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
relative(相对定位)
相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。
注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。
absolute(绝对定位)
定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。
另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed(固定)
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>返回顶部示例</title> <style> * { margin: 0; } .d1 { height: 1000px; background-color: #eeee; } .scrollTop { background-color: darkgrey; padding: 10px; text-align: center; position: fixed; right: 10px; bottom: 20px; } </style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回顶部</div> </body> </html>
脱离文档流:绝对定位。固定定位。
不脱离文档流:相对定位。