CSS笔记

2.元素的显示和隐藏
2.1 display
通过display属性设置元素是否显示，以及是否独占一行显示
常用取值:
注意：行级元素默认无法设置宽和高,可以为行级元素设置display：inline-block，然后就可以设置宽和高了
2.2 visibility
也可以通过visibility属性设置元素的显示和隐藏
常用取值：
也可以通过visibility属性设置元素的显示和隐藏
常用取值：
2.3 区别
·display属性隐藏时不再占据页面中的空间，后面的元素会占用其位置
·visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示
3…轮廓属性
3.1简介
轮廓outline,用于在元素周围绘制一个轮廓，位于border的外围，可以突出显示元素
3.2基本用法
常用属性：
·outline-width轮廓宽度
·outline-color:轮廓颜色
·outline-style轮廓样式
·outline简写
在浏览器，当鼠标单击或使用TAB键让一个表单元素或链接元素获得焦点时，该元素周围会出现一个轮廓 outline
优点：可以提高表单元素的用户体验
缺点：有时会影响美观
3.3 outline与border的区别
·border可以应用于所有的html元素，而outline主要用于表单元素、超链接
·当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
·outline不影响元素的位置和尺寸，而border会影响
4.其他属性
4.1 宽高相关
·max-width设置元素的最大宽度
·min-width设置元素的最小宽度
·max-height设置元素的最大高度
·min-height:设置元素的最小高度
4.2 overflow属性
当元素内容溢出时该如何处理
常用取值：
·visible溢出时可见，显示在元素外，默认值
·hidden溢出的部分不可见（常用）
·scroll无论时否出现溢出始终出现滚动条
·auto溢出时自动出现滚动条
4.3 cursor属性
用来设置光标的形状
常用属性：
·default默认光标，一般为箭头
·pointer手形，光标移动到超链接上时一般显示为手形图标
·move表示可以移动
·text文本
·wait表示程序正忙，需要等待
·help表示帮助
八、页面布局
1.简介
常见页面布局
·表格布局
·div布局
2…表格布局
2.1简介
不适合于复杂布局，仅适用于简单、有规则的结构
定位相对准确，与浏览器基本无关，适用于简单分隔

2.2 基本用法
table常用样式属性：
·border在表格外围设置边框
·border-spacing设置单元格之间的距离（相当于table标签的cellspacing属性，即间距）
·border-collapse表格中相邻单元格边框是否合并，取值，separate、collapse
th/td常用样式属性：
·border为单元格设置边框
·padding设置单元格的边距（相当于table标签的cellpadding属性，边距）
3.div布局
定位绝对准确，使用灵活，适合于复杂的布局方式
3.1 简单布局
两种形式:
·1-1-1布局
·1-2/3-1布局
3.2 圣杯布局
页面结构，两边的边栏宽度固定，中间主体在一定范围内可自适应，并且主体优先被加载
一般防止页面缩放影响浏览，都会为页面设置一个最小宽度
3.3 双飞翼布局
源自淘宝的UED(用户体验设计)团队
双飞翼布局和圣杯布局要实现的效果是相同的，只是思路不同
圣杯布局和双飞翼布局的区别
双飞翼布局比圣杯布局多创建一个div 双飞翼布局不用设置内边距和相对定位，也不用设置偏移量 双飞翼布局使用的margin,圣杯布局使用的是padding
实际开发中建议使用CSS3中新增的flex弹性盒子布局，更简间