css边框 | 易学教程

css-基础

阅读更多关于 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(块级格式化上下文)

css学习之路(三)三大重点

阅读更多关于 css学习之路(三)三大重点

一、盒子模型　　引言:类似于面向对象编程里面的万物皆对象，在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统一设置(简写模式

中高级前端面试秘籍，助你直通大厂(一)

阅读更多关于中高级前端面试秘籍，助你直通大厂(一)

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

记录CSS

阅读更多关于记录CSS

ID选择器：#id { } ID是独一无二的，不可重复类选择器： .class { } 标签选择器 h p input... 子选择器：.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素后代选择器：.food li 通用选择器：*{ } 匹配html中所有标签元素分组选择符：h1,span,li { } 伪类选择符：例： a:hover{color:red;}->鼠标滑过状态设置字体颜色变红; :link /*没有访问过的链接*/ :visited /*已经访问过的链接*/ input:focus{ } 选取获得焦点（光标）的表单标签的权值为1，类选择符的权值为10，ID选择符的权值为100；行内样式style权值1000；继承或者 * 权值0 改变样式权重：!important >> p{ color:red!important; } 权重叠加：复合选择器会权重叠加；权重会叠加，不会有进位 (相同权重值时)：层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。继承性：子标签会继承父标签的某些样式，text- font- line- color 标题标签不会继承父元素文字大小； a标签不会继承父元素的文字颜色；优先级：内联样式表

CSS 基础

阅读更多关于 CSS 基础

CSS 介绍 CSS （ C ascading S tyle S heet ，层叠样式表 ) 定义如何显示 HTML 元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染） CSS语法 CSS实例每个 CSS 样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ CSS的几种引入方式行内式是在标记的 style 属性中设定 CSS 样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将 CSS 样式集中写在网页的 <head></head> 标签对的 <style></style> 标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式外部样式就是将 css 写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1

CSS盒子模型

阅读更多关于 CSS盒子模型

概述：盒子模型属于CSS 三大模块之一，分别是：盒子模型、浮动、定位一、盒子边框之border 　1. 语法描述语法： border-width border-style 设置边框样式 none: 没有边框 solid: 边框为单实线（最为常用） dashed: 边框为虚线 dotted: 边框为点线 double: 边框为双实线 border-color 综合写法：border: 1px blue solid; 　 2. 对表格知识小补充之处理表格的细线边框　　border-collapse: collapse; 合并两个相邻单元格的边框 3.圆形边距border-radius border-radius: 100px; 一个参数代表上下左右 border-radius: 10px 40px; /*左上角和右下角是10px 右上角和左下角是40 （对角线）*/ border-radius: 10px 40px 80px; /*左上角是10px 右上角和左下角是40 右下角是80（按照顺时针走的）*/ border-radius: 10px 40px 80px 100px; /*左上角是10px 右上角40 右下角是80 左下角是100（按照顺时针走的）*/ 二、内边距padding 1. padding用法 padding 属性用于设置内边距，指边框与内容之间的距离

边框的css属性盒子模型

阅读更多关于边框的css属性盒子模型

Border 边框 css属性边框颜色 border-color：red/#ffffff/rgb() 默认为黑色边框样式 border-style:solid（实线）dashed(虚线) 默认为none 边框粗细 border-width：1px；默认是3px Border的简写 border:border-width border -style border-color; Div 块盒子 1.就是标签名没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%，chrome浏览器默认有8px的外边距，清除这8px用 4.这种天生占用宽度为100%的标签我们把它叫块级元素比如 div p h1-h6 ul ol li等等特点 : 独占一行可以设置宽高。 5.大小宽高不是100%，是按照内容的多少决定大小的，这种标签叫内敛元素 (行级元素) 比如 a span 特点：不独占一行不可以设置宽高。块级元素 div分析外边距 margin 内边距 padding 边框 border Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right；文档流元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把它叫标准文档流。他是浏览器天生具有的一种功能。

Border 边框 css属性 Div 块盒子

阅读更多关于 Border 边框 css属性 Div 块盒子

Border 边框 css 属性边框颜色 border-color ： red/#ffffff/rgb() 默认为黑色边框样式 border-style:solid （实线） dashed( 虚线 ) 默认为 none 边框粗细 border-width ： 1px ；默认是 3px Border 的简写 border:border-width border -style border-color; Div 块盒子 1. 就是标签名没有特殊的标签属性 2. 主要用来排版布局 3. 宽度是 100% ， chrome 浏览器默认有 8px 的外边距，清除这 8px 用 4. 这种天生占用宽度为 100% 的标签我们把它叫块级元素比如 div p h1-h6 ul ol li 等等特点 : 独占一行可以设置宽高。 5. 大小宽高不是 100% ，是按照内容的多少决定大小的，这种标签叫内敛元素 ( 行级元素 ) 比如 a span 特点：不独占一行不可以设置宽高。块级元素 div 分析外边距 margin 内边距 padding 边框 border Div 的真实宽度 =width+margin-left+margin-right+border*2+padding-left+padding-right ；文档流元素从上到下（主要说块级元素），从左到右

边框css

阅读更多关于边框css

边框颜色 border-color 边框样式 border-style 边框粗细 border-width 1.外边距margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right；元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把它叫标准文档流。来源： https://www.cnblogs.com/chuliwei/p/11900238.html

有关html的标签以及css属性（border、div）

阅读更多关于有关html的标签以及css属性（border、div）

border 边框css属性边框颜色 border-color 边框样式 border-style：solid （实线）dashed（虚线）默认为none 边框粗细 border-width：1px；默认是3px border的简写 border：border-width；border-style；border-color； div 块盒子 1、就是标签名没有什么特殊的标签属性 2、主要用来排版布局 3、宽度是100%，谷歌浏览器默认有8像素的外边距，清除这8px 用 body{ marign：0； } 4、这种天生占用宽度为100%的标签我们把他叫做块级元素；比如 div、h1、h6等等特点：独占一行，可以设置宽高。 5、大小宽高不是100%，是按照内容的多少决定大小的，这种标签叫做内敛元素（行级元素）比如 a span标签特点不独占一行，不可以设置宽高。块级元素div分析 1、外边距 marign 2、内边距 padding 3、边框 border 来源： https://www.cnblogs.com/zhangyuxinxin/p/11900263.html

订阅 css边框