css边框

引言 又是一年寒冬季，只身前往沿海工作，也是我第一次感受到沿海城市冬天的寒冷。刚过完金九银十，经过一场惨烈的江湖厮杀后，相信有很多小伙伴儿已经找到了自己心仪的工作，也有的正在找工作的途中。考虑到年后必定又是一场不可避免的厮杀，这里提前记录一下自己平时遇到和总结的一些知识点，自己巩固复习加强基础的同时也希望能在你的江湖路上对你有所帮助。笔者在入职最近这家公司之前也曾有过长达3个月的闭关修炼期，期间查阅资料无数，阅读过很多文章，但总结下来真正让你印象深刻的，不是那些前沿充满神秘感的新技术，也不是为了提升代码逼格的奇淫巧技，而是那些我们经常由于项目周期紧而容易忽略的基础知识。 所谓万丈高楼平地起，只有你的地基打得足够牢固，你才有搭建万丈高楼的底气，你才能在你的前端人生路上越走越远 。 这篇主要是先总结一下CSS相关的知识点，可能某些部分不会涉及到太多具体的细节，主要是对知识点做一下汇总，如果有兴趣或者有疑惑的话可以自行百度查阅下相关资料或者在下方评论区留言讨论，后续文章再继续总结JS和其他方面相关的知识点，如有不对的地方还请指出。 1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型

1. CSS盒模型 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。 CSS盒模型可以看成是 由从内到外的四个部分构成，即内容区（content）、内边距(padding)、边框(border)和外边距(margin)。内容区是盒子模型的中心，呈现盒子的主要信息内容；内边距是内容区和边框之间的空间；边框是环绕内容区和内边距的边界；外边距位于盒子的最外围，是添加在边框外周围的空间。 根据计算宽高的区域我们可以将其分为 IE盒模型 和 W3C标准盒模型 ，可以通过 box-sizing 来进行设置： content-box ：W3C标准盒模型 border-box ：IE盒模型 区别： W3C标准盒模型 ：width(宽度) = content(内容宽度) IE盒模型 ：width(宽度) = content(内容宽度) + padding(内边距) + border(边框) 2. BFC BFC即Block Fromatting Context(块级格式化上下文)

一、盒子模型 　　引言:类似于面向对象编程里面的万物皆对象，在html里万物皆盒子，也就是每一个html标签都可以看作一个盒子模型 　　盒子模型有四个组成部分，（盒子里面的内容信息、内边距、盒子的边框、外边距) 　　对于盒子里面的内部信息这里不过多解释，因为内容可能是文本、图片、按钮等等 　　1.盒子的边框（border） 　　　　常用属性: 　　　　　　1.1border-width　　定义边框粗细，单位是px 　　　　　　1.2border-style　　边框的样式 　　　　　　　　1.2.1常用边框值以及其对应的含义 　　　　　　　　　　none：没有边框即忽略所有边框的宽度（默认值） 　　　　　　　　　　solid：边框为单实线(最为常用的) 　　　　　　　　　　dashed：边框为虚线 　　　　　　　　　　dotted：边框为点线 　　　　　　1.3border-color　　边框颜色 　　　　例子:border: 1px solid red;（说明:边框是粗细为1px的红色单实线） 　　　　上面的写法是给盒子四周的边框同时设置样式， 也可以单独给上下左右的某一个边框设置样式，属性名参见 border-top-style， 值的设置依旧跟上面的写法一样 　　2.内边距（padding）是盒子的内容跟边框之间的距离 　　　　设置方式： 　　　　　　2.1统一设置(简写模式