js基础

书写顺序：border-方向、width style color按样式简写border-color、border-width、border-style书写顺序：border-样式：top right、bottom、left必须按顺时针方向书写，同时可以缩写​ border-width: 2px----->四个边框宽度均为2px​ border-width: 2px 4px----->上下一样 左右一样​ border-width: 2px 3px 4px规则：如果省略，则认为上下一样，左右一样终极简写如果四个边样式完全相同，border-width style color2.2 padding表示盒子的内边距，即内容与边框之间的距离有四个方向：也可以简写，按顺时针书写默认：上下一样，左右一样注意：左右冲突以左为准，上下冲突以上为准2.3 margin表示盒子的外边距，即盒子与盒子之间的距离同样也分为四个方向，也可以简写（安顺时针方向，默认上下一样，左右一样）居中对齐：
/元素的水平居中/
/1.块级元素的水平居中/
margin:0 auto;
/提示：块级元素必须指定宽度/
/2.文本的水平居中/
text-algin:center;
/3.垂直居中，将height和line-height设置为相同/
height:100px;
line-height:100px;3.其他3.1 元素所占空间页面中的元素实际所占的空间宽度=width+左右padding+左右border+左右margin高度=height+上下padding+上下border+上下margin3.2 盒子属性默认值不同标签的盒子属性默认值可能不同，需要自己设置
body,ul,ol,dl,li,p,form,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}3.3 外边距的合并也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，他们将合并为一个外边距，合并后的外边距值为其中较大的那个外边距值两种情况：当一个元素出现在另一个元素上面时，第一个元素的下边距与第二个元素的上边距会发生合并当第一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并外边距合并的好处，让排版在视觉上显得更美观六、定位方式1.简介通过position属性实现对元素的定位，有四种定位方式常用取值：取值含义说明static默认值按照常规文档流进行显示relative相对定位相对于标签原来的位置进行的定位absolute绝对定位相对于第一个非static定位的父标签的定位fixed固定定位相对于浏览器窗口进行定位设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right2.相对定位先设置元素的position属性为relative，然后在设置偏移量3.绝对定位先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量注意：一般来说都会将父标签设置为非static定位如果父标签不是非static定位，则会相对于浏览器窗口进行定位设置元素为绝对定位后，元素会浮到页面上方4.固定定位先设置元素的position属性为fixed，然后再设置偏移量设置元素为固定定位后，元素会浮动在页面上方5.z-index设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序取值为数字，值越大优先级越高，默认为auto（大多数浏览器默认为0）注意：只能给非static定位的元素设置z-index属性七、其他CSS属性1.浮动和清除1.1 浮动属性通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示常用取值：left左浮动right右浮动none不浮动、默认值设置float属性后，元素会浮在页面上层，此时父容器无法计算自己的尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决1.2 清除属性通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素常用取值：left左侧不允许出现浮动元素right右侧不允许出现浮动元素both两侧均不允许出现浮动元素none允许两侧出现浮动元素，默认值结论：对于非浮动元素，两边都可以设置清除属性（常用）对于浮动元素，向哪边浮动，就只能设置哪边的清除2. 元素的显示和隐藏2.1 display通过display属性设置元素是否显示，以及是否独占一行常用取值：取值含义说明none不显示inline显示为内联元素，行级元素的默认值将块级元素变为行级元素，不在独占一行block显示为块级元素，块级元素的默认值将行级元素转化为块级元素，独占一行inline-block显示为内联元素，但是可以设置宽和高在inline基础上允许设置宽度和高度注意：行级元素是无法设置宽度和高度的，可以为行级元素设置display：inline-block然后就可以设置宽和高了2.2 visibility也可以通过visibility属性设置元素的显示和隐藏常用属性：取值含义说明visible显示hidden隐藏2.3 区别display隐藏时不再占据页面中的空间，后面的元素会占用其位置visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示3.轮廓属性3.1 简介轮廓outline，用于在元素的周围绘制一个轮廓，位于border外围，可以突出显示元素3.2 基本用法常用属性outline-width 轮廓宽度outline-color 轮廓颜色outline-style 轮廓样式outline 简写在浏览器中，当鼠标单击或使用tab键让一个表单或链接获得焦点时，该元素会有一个轮廓优点：可以提高使用表单的用户体验缺点：有时会影响美观3.3 outline和border区别border可以应用于所有的html元素，而outline主要用于表单元素，超链接元素当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为outline不影响元素的尺寸和位置，而border会影响4.其他属性4.1 宽高相关max-width 设置元素的最大宽度max-height 设置元素的最大高度min-width 设置元素的最小宽度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表格中相邻边框是否合并，取值：seprate、collapseth/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弹性盒子的