浮动
float:浮动的意思 浮喽特
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会相互重叠
浮动元素不会上下浮动
在CSS中,任何元素都可以浮动
float:none/left/right
clear属性
(清除浮动 被影响的那个)
clear 属性用于清除浮动所带来的影响
(又占用文档流宽高)
clear:none/left/right
/both(清除两边的浮动)
(清除浮动 写在父级)
(又占用文档流宽高)
float与overflow
overflow:hidden;溢出 隐藏
表格常用样式属性
- border-collapse:collapse;
设置表格边框合并collapse合并边框,separate为不合并,是默认值. - border-spacing:20px 30px;
设置单元格之间的间隙,一个参数代表上下左右相同,两个参数代表,一个左右,一个上下,三四个参数没用 - vertical-align属性,垂直对齐方式
vertical-align:top/middle/bottom - caption-side:bottom;
设置标题的位置,默认top单元格之上,还有一个是设置在单元格下面的bottom -
table-layout:fixed;
auto自动表格,自动调整布局,fixed为固定的表格布局,不自动调整,内容会因为过多过大而变形,前提是可以设置单元格的width的百分比
文本格式化
font : font-style font-variant font-weight font-size fontfamily;
- font-family:微软雅黑;
浏览器加载的字体样式 - font-size:4em;
设别尺寸单位 - font-weight:800;
默认400,bold默认为700,bolder为更黑,还可以取值100-900,900为最黑 - font-style:italic;
默认倾斜,默认父标签样式;italic倾斜的意思,inherit为跟随父标签 - font-variant:small-caps;
以小型字母输入,大写字母输出 - text-align:center;
文本排列方式 - text-decoration:none;
设置文本线条
over-line显示在文本的上卖弄
under-line下划线
line-thrpugh 贯彻文字,删除的效果
- line-height:100px;
行高设置文本单行的高度,处理单行文本垂直居中 - text-shadow: 20px 50px 10px #000;
文本阴影效果特好
第一个参数X轴偏移
第二个参数Y轴偏移
第三个参数模糊度
第四个参数颜色
- white-space:normal/nowrap;
处理空白 - text-overflow:clip/ellipsis;
文本溢出,文本横向超出,显示...,必须搭配overflow:hidden; - overflow:hidden;
隐藏溢出 - word-break:keep-all;
文本换行,
break-all塞满了才会换行
keep-all保持阵型中文标点符号作为分隔符,一条中文语句不会被放到两行。