border虚线 | 易学教程

8 盒子模型

阅读更多关于 8 盒子模型

盒子模型首先，我们来看一张图，来体会下什么是盒子模型。所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。盒子边框（border）语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 double：边框为双实线盒子边框写法总结上边框 border-top-style:样式; border-top-width:宽度; border-top-color:颜色; border-top:宽度样式颜色; 下边框 border-bottom-style:样式; border- bottom-width:宽度; border- bottom-color:颜色; border-bottom:宽度样式颜色; 左边框 border-left-style:样式; border-left-width:宽度; border-left-color:颜色; border-left:宽度样式

css 盒子模型1

阅读更多关于 css 盒子模型1

css盒子模型 CSS盒子模型盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置宽高 width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */ 设置边框设置一边的边框，比如顶部边框，可以按如下设置： border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */ 上面三句可以简写成一句： border-top:10px solid red; 设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成

002 前端基础之CSS

阅读更多关于 002 前端基础之CSS

目录一、CSS介绍二、CSS语法 2.1 CSS实例 2.2 CSS注释三、CSS的几种引入方式 3.1 行内样式(内联样式) 3.2 内部样式 3.3 外部样式四、CSS选择器 4.1 基本选择器元素选择器 ID选择器类选择器通用选择器 4.2 组合选择器后代选择器儿子选择器毗邻选择器兄弟选择器 4.3 属性选择器 4.4 分组和嵌套分组嵌套 4.5 伪类选择器 4.6 伪元素选择器 first-letter before after 4.7 选择器的优先级 CSS继承选择器的优先级五、CSS属性相关 5.1 宽和高 5.2 字体属性文字字体字体大小字重（粗细）文本颜色 5.3 文字属性文字对齐文字装饰首行缩进文字之间的距离 5.4 背景属性 5.5 边框 5.6 border-radius 5.7 display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10 padding内填充 4.11 float浮动三种取值 5.12 clear清除浮动清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）脱离文档流：不脱离文档流： 5.15 z-index 5.16 opacity 六、综合案例

CSS

阅读更多关于 CSS

认识css 现在的互联网前端分为三层： HTML:超文本标记语言。从语义的角度描述页面结构 CSS:层叠样式表。从审美的角度负责页面样式 JS:Javascript。从交互的角度描述页面的行为 css它是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观。 css简介 CSS全称为“层叠样式表”( Cascading Style Sheets ),它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等等。例: css语法选择符声明(属性:值) 选择符 :我们又称为选择器，指明网页中应用样式规则的元素，如p)的文本变为蓝色，而其它元素(如ul,ol等等)不会受到影响。声明：在英文大括号”{}”中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”; css注释用`/*注释语句*/`来表明(html中使用``) css基础 css引入的三种方式内联式嵌入式外部式内嵌式 css样式表把css代码直接写在现有的HTML标签中。例: <p style='color:red;'>文字颜色为红色</p> 把对应的style属性，写在p标签的开始标签中。css样式代码要写在style=“”双引号中，如果有多条css样式代码设置可以写在一起

小菜鸟之HTML第三课

阅读更多关于小菜鸟之HTML第三课

jquery的引入 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery的引入</title> 6  7 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 8 <script type="text/javascript"> 9 //将脚本写在这里 10 //jq的基本语法 11 /* $("选择器或者对象").ready(function () { 12 13 }); 14 var $doc=$(document 或者选择器) :表示将javascript对象变成 jq对象 15 $doc可以调用jq的一些方法和属性 16 17 */ 18 // 第一个jq的使用,输出警示框 19 $(document).ready(function () { 20 //选择器 21 //docuemnt.getElementById("#idname") 22 $("#idname").show(function () { 23 alert("show alert"); 24 25 }); 26 }); 27 28 //jq简写 29 $

CSS盒模型及应用

阅读更多关于 CSS盒模型及应用

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？牛奶是怎样运输，让消费者购买的呢？我们说过，行内元素比如文字类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。盒子模型（Box Model）这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。首先，我们来看一张图，来体会下什么是盒子模型。所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。盒子边框（border）

css三大特性

阅读更多关于 css三大特性

css，层叠样式表 CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 1.样式冲突，遵循的原则时就近原则 2.样式不冲突，不会层叠 CSS继承性子承父业所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。适当使用，不可滥用，好处减低了css的复杂度，子元素可以继承父元素的哪些样式(color,text-,font-,line-) CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。继承样式的权重为0，即在嵌套结构中，不管父元素的权重多大，被子元素继承是，权重都为0. 行内样式优先。行内样式权重相当高权重相同时，层叠行，就近原则 css有一个命令 !important 优先级最大 ### CSS的特殊性(Specificity) 关于css 的权重，我们需要一套公式，就叫CSS的特殊性(Specificity)，我们称之为css特性或非凡性 css特性有四个数字组成，从左到右，左边最大，数位没有进制

web前端入门到实战：css中border-style 属性

阅读更多关于 web前端入门到实战：css中border-style 属性

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。例子 1 border-style:dotted solid double dashed; 上边框是点状右边框是实线下边框是双线左边框是虚线例子 2 border-style:dotted solid double; 上边框是点状右边框和左边框是实线下边框是双线例子 3 border-style:dotted solid; 上边框和下边框是点状右边框和左边框是实线例子 4 border-style:dotted; 所有 4 个边框都是点状可能的值对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端描述最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS

CSS-初学3

阅读更多关于 CSS-初学3

CSS三大特性 css层叠性层叠性是指多种css样式的叠加。是浏览器冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个会将另一个属性层叠掉一般情况下，如果出现样式冲突，则会按照css书写顺序，以最后的样式为准样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠 css继承性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。简单的理解就是:子承父业。注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-, font-,，1ine-这些元素开头的都可以继承，以及co1or属性) css优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。在考虑权重时，初学者还需要注意一些特殊的情况，具体如下: 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖维承来的样式。行内样式优先。应用sty1e属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级

css border 三角形阴影(不规则图形阴影) & 多重边框的制作

阅读更多关于 css border 三角形阴影(不规则图形阴影) & 多重边框的制作

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ border 的组合写法　　border：border-width border-style border-color; border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以； border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有； border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；　　边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ; 　　所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ; 　　单属性也可以有组合写法： border-width:上右下左；（顺时针方向） border-width:上左右下； border-width:上下左右； border-width:四个方向； border-style | border-color也可以这样设置；　

订阅 border虚线