笔记HTML

• 盒子模型
• 网页就是盒子之间的配合
• border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色
• 语法 border : border-width 定义边框粗细，单位是px
• 语法 border : border-style 边框的样式
• 语法 border : border-color 边框颜色
• border-style可以设置如下值
• none : 没有边框即忽略所有边款的宽度（默认值）
• solid : 边框为单实线（最为常用的）
• dashes : 边框的虚线
• dotted : 边框为点线
• 可以缩写 border : 1px solid red; 没有顺序
• 边框还可以分开写 border-top: 1px solid red; /* 只设定上边框， 其余同理 */
• border-collapse : collapse; 表示相邻边框合并在一起
• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
• 内边距（padding）
• padding属性用于设置内边距，即边框与内容之间的距离。
• padding-left 左内边距
• 同理right top bottom
• 内边距设置 padding : 5px ; 1个值，代表上下左右都有5像素内边距
• padding : 5px 10px; 2个值，代表上下是5像素，左右是10像素
• padding : 5px 10px 20px ; 表示上5 左右10 下20
• padding : 5px 10px 20px 30px; 表示 上5 左10 下20 右30
• 当我们给盒子指定 padding 值之后，发生了 2 件事情：1. 内容和边框有了距离，添加了内边距。2. padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
• 解决方案：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
• 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
• 外边距（margin）
• margin 简写方式代表的意义跟 padding 完全一致。
• 外边距可以让块级盒子水平居中，但是必须满足两个条件：
• ① 盒子必须指定了宽度（width）。
• ② 盒子左右的外边距都设置为 auto 。
• 外边距典型应用常见的写法，以下三种都可以：
•  margin-left: auto; margin-right: auto;
•  margin: auto;
•  margin: 0 auto;
• 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
• 外边距合并
• 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
• 解决方案：尽量只给一个盒子添加 margin 值。
• 清除内外边距
• 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
• * { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }
• 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
• border-radius 属性用于设置元素的外边框圆角。
• border-radius:length;