Day7:
html和css
如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相.
清除浮动的方法
额外标签法,在最后一个浮动元素后面添加一个空的标签代码:
复制代码
使用after伪元素进行清除浮动.
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}.clearfix { *zoom: 1;}复制代码 进行双伪元素清除浮动
.clearfix:before, clearfix:after { content: ""; display: table; // 可以清除浮动}.clearfix:after { clear:both;}.clearfix { *zoom: 1;}复制代码 好记性不如敲烂键盘
vertical-align垂直对齐
显示和隐藏
display visibility overflow复制代码
dispaly:none;display:block;复制代码
dispaly: block;dispaly: inline;dispaly: none;复制代码
// dispaly: none; 隐藏元素Demo 达叔小生
复制代码
使用dispaly: none后隐藏对象,不保留位置.
visibility
visibility: inherit | visible | collapse | hidden复制代码
vertical-align垂直对齐针对行内块元素.
vertical-align: baseline | top | middle | bottom复制代码
overflow
overflow: visible | auto | hidden | scroll复制代码
cursor鼠标样式:
cursor: move;复制代码
- 我是达叔
- 小手
- 移动
- 文本
轮廓outline
outline: none;outline: outline-color || outline-style || outline-width复制代码
resize防止拖拽文本域
resize: none复制代码
复制代码
vertical-align垂直对齐
margin: 0 auto;复制代码
vertical-align: baseline;复制代码
white-space设置
text-overflow文字溢出
text-overflow: clip | ellipsisclip: 不显示省略标记(...)ellipsis: 当对象内文本溢出,显示(....)复制代码
盒子模型（CSS重点）
三个大模块： 盒子模型 、 浮动 、 定位
盒子边框（border）
border : border-width || border-style || border-color 复制代码
none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线 dotted：边框为点线double：边框为双实线复制代码
border-top: 1px solid red; /*上边框*/border-bottom: 2px solid green; /*下边框*/border-left: 1px solid blue;border-right: 5px solid pink;复制代码
表格的细线边框
table{ border-collapse:collapse; } collapse 单词是合并的意思border-collapse:collapse; 表示相邻边框合并在一起。复制代码 内边距（padding）
padding属性用于设置内边距。
padding-top:上内边距padding-right:右内边距padding-bottom:下内边距padding-left:左内边距复制代码
外边距（margin）
margin属性用于设置外边距。
margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:上外边距margin:上外边距 右外边距 下外边距 左外边复制代码
外边距实现盒子居中
.header{ width:960px; margin:0 auto;}文字水平居中 text-align: center子水平居中 左右margin 改为 auto复制代码 清除元素的默认内外边距
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */}复制代码 外边距合并
使用margin定义块元素复制代码
overflow:hidde复制代码
content宽度和高度
宽度属性width和高度属性height
圆角边框(CSS3)
border-radius: 50%;复制代码
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);复制代码
浮动(float)
选择器{ float:属性值;}复制代码 | 属性值 | 描述 |
|---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动 |
清除浮动本质
选择器{clear:属性值;} clear 清除 复制代码 | 属性值 | 描述 |
|---|---|
left | 清除左侧浮动的影响 |
right | 清除右侧浮动的影响 |
both | 同时清除左右两侧浮动的影响 |
额外标签法
clear:both // 父级添加overflow属性方法给父级添加： overflow为 hidden|auto|scroll 都可以实现复制代码
使用after伪元素清除浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;}// 使用before和after双伪元素清除浮动.clearfix:before,.clearfix:after { content:""; display:table; }.clearfix:after { clear:both;}.clearfix { *zoom:1;}复制代码 元素的显示与隐藏
display 显示display : none 隐藏对象display:block visibility 可见性visible : 对象可视hidden : 对象隐藏overflow 溢出visible : 不剪切内容也不添加滚动条。auto :超出自动显示滚动条，不超出不显示滚动条hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉scroll : 不管超出内容否，总是显示滚动条复制代码
鼠标样式cursor
cursor : default 小白 | pointer 小手 | move 移动 | text 文本复制代码
轮廓 outline
outline : outline-color || outline-style || outline-width// outline: 0; 或者 outline: none; 复制代码
防止拖拽文本域resize
复制代码
vertical-align 垂直对齐
margin: 0 auto;text-align: center;vertical-align 垂直对齐vertical-align : baseline |top |middle |bottom 复制代码
溢出的文字隐藏
white-spacenormal : 默认处理方式nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。text-overflow 文字溢出text-overflow : clip | ellipsisclip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记复制代码
如果看了觉得不错
点赞！转发！
达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞