margin的用法:
1,margin是在元素的宽高以外的
2,作用:控制元素之间的位置关系
3,margin不能改变盒子本身大小的
4,单一一个方向设置margin值:
margin-left margin-right margin-top margin-bottom
5,margin设置技巧和padding一样可以看我上一篇随笔
6,margin是可以接受负数的
7,让当前元素在父元素里面左右居中:margin:0 auto;
8,margin经常出现的bug
A,上下二个元素之间的margin会重叠,按照最大的来显示
B,默认情况下(父子元素都没有浮动等属性)给第一个子元素添加margin-top的值会解析到父元素上面
控制子元素在父元素的位置关系用padding 控制同级元素之间位置关系用margin
Div在不去设置宽度的时候或者设置width:100%;跟随父元素的宽度 内部元素大小,该怎么设置就怎么设置
清除标签默认样式,重置样式
body:font-size:16px;
清除字体font-family:”Microsoft”;
清除前面点的样式 ul,ol,li{
list-style:none;
}
清除下划线 u,a{
text-decoration:none;
}
清除倾斜 i,em{
font-style:normal;
}
清除加粗b,strong{
font-weight:normal;
}
清除默认大小h1~h6{
font-size:16px;
font-weight:normal;
}
边框清零img{
border:none;
}
清除input聚焦时候的蓝色边框input{
outline:none;
}
1,input默认情况如果对不起 添加浮动即可
2,Input按钮边框会长在input的宽高内部(兼容问题)
3,如何给input按钮添加边框 在input按钮的外围套一个盒子 把边框架子啊盒子上面
1,如果新闻列表有时间
<li>
<a href=”#”>内容<a/>
<span>时间</span>
</li>
2,给li设置宽高 高度的获取量行高即可
3,如果新闻列表有时间 给a加浮动 给时间标签也加浮动
控制文本换行:white-space:nowrap;
空白空间的处理:
white-space
属性值:
pre 会保留空格,并且文本不会换行
pre-line
pre-wrap 保留空白换行
nowrap 让文本不换行
溢出(超出)容器之后的显示状态
overflow:;
属性值:
scroll 让容器产生滚动条,可以让用户拖动滚动条来查看
auto 自动(当内容超出的时候有滚动条,没有的时候没有滚动条)
hidden 超出隐藏
overflow-x|y 控制纵向或者横向的溢出状态
2,让文本超出隐藏
overflow:hidden;
3,让超出的文本省略号显示
4,text-overflow:clip/ellipsis
clip:不产生省略号
ellipsis:产生省略号
根据css的显示状态把html标签分类:
块状元素 内联元素(行内元素) 行内块元素
块状元素特点:(默认情况)
A,在页面张红以矩形区域显示
B,能直接设置宽度和高度
C,独占一行 自上而下排列
D,块状元素一般作为其他内容或者元素的容器
内联元素的特点:
A,在页面中最小单位为矩形
B,不能直接给元素设置宽度和高度
C,在一行内排列,不会产生换行
D,也符合盒模型的规则,但是个别属性(padding-t/p margin-t/p 不能正确显示)
行内块元素:
可以设置宽高
根据整体上下文 最终元素 所形成的是块状还是内联
button典型的可变元素
元素类型的转换:
display:;
作用:检索或者设置元素所生成的类型
display:block;
作用:将原故事转化为块状元素 拥有块状元素的特点
display:inline;
作用:将原属转成内联元素 拥有内联元素的特点
display:none;
将元素完全隐藏,并且不占据空间
知识点补充:
当元素有浮动的时候,可以添加宽高
1,块状元素的display的默认值大部分是block 但是里面有特殊的 例如li的display:list-item;
list-item的元素,有列表符号的
2,内联元素的display的默认值,大部分为inline但是这一类里面有特殊的:
input的display的默认值,大部分为inline-block 行内块元素
inline-block元素的特点:
1,在 一行内显示排列 不会换行
2,可以直接设置大小
img默认的特点和inline-block的特点完全吻合的 但是浏览器默认解析display是inline
如果让内联元素在父元素里面左右居中:只需要给父元素添加text-aline:center;
vertical-align:
属性值
top 顶线对齐
bottom 底线对齐
middle 中线对齐
baseline 基线对齐
让子元素在父元素里面上下居中
上下居中需要找一个元素当做参照物确定当前容器里面的中心线
参照物怎么确定?
在资源的后面(不要回车换行)添加一个空的span并且设置样式
span{
0; 不能显示
height:100%; 容器高度
}
让span居中左右排列 display:inline-block;
确定中心线:vertical-align:middle;
这样的居中显示你们应该没有见过 现在用的几乎没有大家看个乐呵就行
display 属性值:
block 转块
inline 转内联
none 隐藏
list-item 列表元素
inline-block 行内块
块:块状元素在设置宽度的时候跟随父元素的变化
内联元素:不去设置宽高,大小被内容撑开的