css其他属性
1.标准流
块级 - 一个占一行,默认的宽度是父标签的宽度,默认的高度时内容的高度,设置宽度和高度有效
行内 - 一行显示多个,默认的高度和宽度就是内容的高度和宽度,设置宽度和高度无效
行内块 - 一行显示多个,默认的宽度和高度,就是内容的宽度和高度,设置宽高有效
2.display:修改标签的类型
block
inline
inline-block
3.脱标(脱流) - 浮动、定位
一行可以显示多个,默认的大小就是内容的大小,设置宽高有效(标签之间没有空隙)
4.浮动(float)
left - 左浮动
right - 有浮动
a.文字环绕
被环绕的标签浮动,作用于文字的标签不浮动
b。清除浮动 - 清除的是因为浮动而产生的塌陷问题
高度塌陷 - 父标签不浮动,子标签浮动就会产生高度塌陷的问题
选中塌陷的标签{overflow:hidden}
5.定位
a.距离 - left、right、top、bottom
b.设置参考对象 - position
initial/static - 默认值,不定位
absolute - 绝对定位,相对于父标签定位(前提是父标签属性值不是默认值)
relative - 相对于自己定位(自己在标准流中的位置)
fixed - 相对于浏览器定位
sticky - 当浏览器滚动相对于浏览器定位,不滚动就相对自己在标准流中的位置定位(适用于最后一个标签)
6.盒子模型
一个标签是由四个部分组成;content、padding、border、margin其中margin不可见
其他样式
文字加粗
bolder(更粗的)/bold(加粗)/normal(常规)100-900
font-weight:500;
文字样式
italic/oblique - 切斜
normal - 常规的
font-style:normal;
水平对齐方式
left - 左对齐
right - 右对齐
center - 居中
text-align :center;
注意:这个属性是针对标签的内容(内容可以是文字也可以是标签)
文字行高 - 设置一行文字的高度
一个标签中只有一行内容的时候可以通过设置行高和标签的高度相同来让内容在垂直方向居中
line-height:330px;
文字装饰器
none - 去掉装饰器
underline - 添加下划线
overline - 添加上划线
line-throuht - 删除线
text-decoration:underline;
首行缩进
text-indent:2em;
字间距
letter-spacing:10px
2.列表相关属性
定义符号样式
disc(实心圆)
circle(空心圆)
none(去掉)
list-style-type:circle;
定义符号图片
list-style-image:url();
定义符号位置
outside
inside 有一定的距离
list-style-position:inside;
设置背景图
background-image:url();
背景图片是否平铺
repeat(默认的) - 当背景图片比标签小的时候,背景会重复渲染,知道将整个标签铺满为止
none - 不平铺 背景图片只显示一次
background-repeat:no-repeat;
背景图的位置
x坐标 - 数值/left/right/center
y坐标 - 数值/left/right/center
background-position-x:center;
background-position-y:center;
/===============通用=============/
{
/取消所有自带的间距/
margin: 0;
padding: 0;
/所有的标签的子标签都相对于自己来定位/
position: relative;
}
a{
/取消所有a标签的下划线/
text-decoration: none;
}
/垂直居中*/
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
/背景图
background:图片地址 是否平铺 x坐标 y坐标 背景颜色/
padding-left: 23px;
background: url(../img/q-icon.png) no-repeat 0px center rgba(0,0,0,0);
/focus - 成为焦点对应的状态/
content #login_div #div2 button:focus{
/*去掉outline*/
outline: 0;
color: rgb(215,36,50);
网友评论