边框背景

当对文档进行布局时，浏览器渲染引擎会根据css-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子。CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸） 标准盒模型 从外向内依次为： Margin + border + padding + content-width 外边距区域 margin area 用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。外边距区域大小由 margin-top , margin-right , margin-bottom , margin-left 及简写属性 margin 控制。 边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border 控制。 内边距区域padding area 延伸到包围padding的边框。如果 内容区域content area 设置了背景、颜色或者图片，这些样式将会延伸到padding上(译者注：而不仅仅是作用于内容区域) 。 它位于内边距边界内部, 它的大小为 padding-box 宽与 padding-box 高。 内容区域content area 是包含元素真实内容的区域。它通常包含背景

要求：第一个按钮是选中的状态，点击按钮变背景色 效果图： 点击前： 点击后： 先写一个简单的按钮样式 <template> <div> <button class="btn1">按钮1</button> <button class="btn2">按钮2</button> </div> </template> <script> export default { data() { return {}; }, methods: {} }; </script> <style scoped> .btn1 { width: 72px; height: 20px; border: 1px solid #d9d9d9; border: 0; outline: none; } .btn2 { width: 72px; height: 20px; border: 1px solid #d9d9d9; border: 0; outline: none; } </style> 然后在需要写点击之后的样式和逻辑代码： 加一个三元表达式和样式，以及点击事件 <button class="btn1" @click="btn1data()" :class="showmode ? 'active' : 'btn1'" > 按钮1 </button> <button class="btn2" @click=

1.1边框 　　其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特性，我们需要重点掌握。 1.1.1边框圆角 　　border-radius 每个角可以设置两个值，x值,y值 　　1：边框圆角处理 　　2：正方形 　　border-radius{ 　　　　width:200px; 　　　　height:200px; 　　　　margin:100px auto; 　　　　background-color:green; 　　　　/* 　　　　border-radius:100px 100px 100px 100px / 　　　　border-radius:50px 100px 50px; 　　　　//四个角都是100px 　　　　border-radius:100px; 　　　　//表示1，3是100px 2,4是50px 　　　　border-radius:100px 50px; 　　　　*/ 　　} 　　　3:椭圆　　 　　　　圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正元是椭圆的一种特殊情况。如下图 　　　 　　　　可分别设置长短半径，以“/”进行分隔，遵循“1，2，3，4”规则，前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用设置纵轴半径（分别对应纵轴1、2、3、4位置） 　　1.1.2边框阴影

CSS 盒子模型 所有HTML元素都可以看作一个盒子 盒子模型的元素：边距，边框，填充，内容 元素说明： Margin（外边距）：清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 <div> margin-top:100px; margin-right:100px; margin-bottom:100px; margin-left:100px; </div> 简写： <div> 　　margin:10px 20px 30px 40px; </div> Border(边框):围绕在内边距和内容外的边框 <div> 　　border: 20px solid red; </div> Padding(填充)：定义元素边框与元素内容之间的空间，即上下左右的内边距 <div> 　　padding-top:10px; 　　padding-right:10px; 　　padding-bottom:10px; 　　padding-left:10px; </div> 简写： <div> 　　padding:10px;20px;30px;40px; </div> Content(内容)：盒子的内容，显示文本和图像。 元素的计算公式： 总元素宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距 总元素高度

元素的背景是内容、内边距和边框区的背景。 css中：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 bootstrap中：width 和 height 指的是包含border、padding、element的框的总尺寸,不包含margin。 margin、padding、border四值顺序：top right bottom left。值复制遵循对等原则。 length：规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。%：定义基于父元素宽度的百分比。此值不会如预期地那样工作于所有的浏览器中。 padding-top 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，不允许负值。padding-bottom同理。 padding-left该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.padding-right同理。 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。a. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开

1.css基本样式讲解 1.1 css背景 background-attachment：背景图像是否固定或者随着页面的其余部分滚动 background-color：设置元素的背景颜色 background-image：把图片设置为背景 background-position：设置背景图片的起始位置 background-repeat：设置背景图片是否及如何重复 background-size：规定背景图片的尺寸 background-orgin：规定图片的定位区域 background-clip：规定背景的绘制区域 1.2 css文本 color ：文本颜色 direction :文本方向 line-height :行高 letter-spacing: 字符间距 text-align :对齐元素 text-decoration :向文本添加修饰 text-indent :缩进元素中文本首行 text-transform :元素中的字母 unicode-bidi :设置文本方向 white-space :元素中空白的处理方式 word-spacing :字间距 text-wrap：自动换行 text-shadow：向文本添加阴影 1.3 css字体 font-family :设置字体系列 font-size :设置字体尺寸 font-style :设置字体风格 fongt

在css中，每个元素都可以当作一个矩形的盒子。之所以这样是为了更方便布局。把这些元素作为盒子后，我们的布局就相当于在页面中摆放盒子了。 Content内容区 内容区相当于盒子存放东西的空间，位于盒子的最里层。元素的所有子元素都是放在父元素的内容区。 值得注意的是， 当我们指定一个元素的width和height时，其实只是设置了内容区的宽和高。 padding内边距 盒子在内容区周围可能有一层内边距，会影响盒子的大小。内边距是透明的，没有颜色也没有装饰。 盒子一共有四个方向的内边距，分别为padding-top、padding-right、padding-bottom、padding-left。 可以利用上述属性设置单侧内边距，也可以同时设置四个方向的内边距。例如：padding：10px 20px 30px 40px; 表示的是设置上 右 下 左的内边距分别为10px，20px, 30px, 40px。 也可以 padding: 10px 20px 30px; 表示的是上 左右 下 的内边距 也可以 padding:10px 20px; 表示的是上下 左右 的内边距 还可以 padding：10px; 表示的是 上下左右 内边距都为10px. Border边框 边框位于盒子的边缘， 设置边框需要同时设置border-width、border-color、border

没看 CSS （ Cascading Style Sheet ）之前，一直以为 CSS 挺难的，在网页上看到的那些代码一点都不知道代表些什么，晚上花了几个小时看了一下，发现也不过如此，而且好像属于超级简单的那种。有这种感觉不知道 CSS 真的是这样还是由于我孤陋寡闻的缘故。 其实我感觉学 CSS 只要知道 CSS 的类型就够了，然后看到不认识的标签 google 一下就可以了。不过如果要自己设计还是要了解一些里面的具体内容。计算机学到现在，我越来越感觉不管是做软件还是弄网站，就像是在玩搭积木的游戏，先要了解你要做什么东西，就像孩子们的志愿，我要造长城还是搭一个竖型塔亦或只是键一个小木屋就够了，然后孩子们会根据手上的积木材料来决定怎么去搭建自己的梦想，就像是我们根据不同的语言功能去拼凑我们的软件。感觉知识的模式都是这样，高中学做数学题目我也有这个感觉，我很少用参考书，一般总是先看看书本，给我提供了多少的定理、公式等，然后碰到题目就去套，总有一个会是正确的。运用知识不就是套用自己的学到过的知识的过程吗？想到这里我很后悔小时候没有玩过搭积木的游戏了！记得那个时候我应该还不知道搭积木是什么东西吧，不知道从什么时候才开始知道有这个名词，就是感觉等自己很大以后才知道！ 言归正传了， CSS 主要包括 3 种样式类型，即类选择器样式、 ID 选择器样式、重定义标记样式。 类选择器样式定义如下：

认识盒子模型 每个矩形都有元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。 （1）网页是有多个盒子嵌套排列的结果。 （2）内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 （3）外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。 （4）虽然盒子模型拥有内边距、边距、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素。 边框属性 设置内容 样式属性 常用属性值 上边框 border-top-style:样式； border -top-width:宽度； border-top-color:颜色； bordet-top:宽度 样式 颜色 ； 下边框 border-bottom-style:样式； border-bottom-width:宽度； border-bottom-color:颜色； border-bottom:宽度 样式 颜色； 左边框 border-left-style:样式； border-left-width:宽度； border-left-color:颜色； border-left:宽度 样式 颜色； 右边框 border-right-style:样式； border-right-width:宽度； border

网页设计基础之CSS（三） 1.CSS的盒子模型 ①盒子模型的初步认识 Margin(外边距) - 与其它盒子的距离 Border(边框) - 手机盒子的厚度 Padding(内边距) - 填充泡沫的厚度 Content(内容) - 内容 注意：虽然盒子模型拥有外边距，边框，外边距，宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素 ②盒子模型的相关属性 边框属性 1.样式综合设置： border-style:上边 右边 下边 左边 注意边框的顺序、如果样式为nomal或没有时，后续不可加属性 border-style的复合书写形式：上边 左右边 下边；上下边 左右边；上下左右边 2.设置边框宽度： border-width：上边宽度 右边宽度 下边宽度 左边宽度 注意边框的顺序 3.设置边框颜色： border-color：上边颜色 右边颜色 下边颜色 左边颜色 注意边框的顺序 边框透明色： transparent 或者 border-color：transparent 内边距属性 padding： 上内边距 右内边距 下内边距 左内边距 padding的相关属性的取值可为auto自动 外边框属性 当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中 .header { width : 100px ; margin : 0 auto