border虚线

1.盒子模型的相关属性 1.边框属性 1.边框样式（border-style） none：没有边框设置 solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为实线 在设置边框的样式时，既可以单边进行设置，也可以同时设置4条边的样式 例如： border-top-style:上边框样式 border-right-style:右边框样式 border-bottom-style下边框样式 border-left-style:左边框样式 border -style:上边框样式 右边框样式 下边框样式 左边框样式 border-style:上边框样式 左右边框设置 下边框设置 border-style:上下边框样式 左右边框设置 border-style:上下左右边框样式 实现方式： p{border-style:dashed solid solid solid} 2.设置边框宽度（border-width） border-top-width:上边框宽度 border-right-width:右边框宽度 border-bottom-width下边框宽度 border-left-width:左边框样式 border-width：上边框宽度【右，，，，下，，，，左】 实现方式： p{border-width：3px；/ 设置综合的4边宽度 / } 3

【长度单位】 CSS可使用长度单位 单位 单位说明 范例 pt Point，就像是Word里面的Point一样大小 font-size:10pt px Pixels，依您屏幕分辨率而决定大小 font-size:10px pc Pica，6个Pica是一英吋 font-size:10pc mm 公厘，用过尺...这个设定值完全不会因为其它设定而改变 font-size:10mm cm 公分，不会因为使用者设定而改变 font-size:10cm % 百分比，大部分是指所在位置宽度或者长度百分比 font-size:10% 【颜色表示】 CSS可用颜色表示方式 表示方式 表示方式说明 范例 #rrggbb 可以用Windows色彩选择工具找到 color:#feefc7 rgb(#,#,#) 用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找 color:rgb(135,255,124) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色 color:rgb(70%,35%,41%) 颜色名称 用颜色的名称来指定颜色 color:brown 【背景可用值】 CSS可用背景值 名称 说明 可能值 范例 background 背景 下面的背景设定值皆适用 background:fixed background-attachment

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 块元素与内联元素区别 一般情况做布局用块元素 div。在一行上就用<span> 块元素又名块级元素（block element）和其对应的是内联元素(inline element),都是html规范中的概念 block元素的特点 1.总是在新行上开始 2.高度，行高以及外边距和内边距都可控制 3.宽度缺省是它的容器的100%，除非设定一个宽度 4.它可以容纳内联元素和其他块元素 div就是一个块元素 <h1> <h2> <h3> <h4> <h5> <h6> <hr>-水平分隔线 address-地址 blockquote-块引用 center-居中对齐块 dir-目录列表 filedset-form控制组 inline内联元素的特点 1.和其他元素都在一行上 2.高，行高以及外边距和内边距不可改变 3.宽度就是它的文字或图片的宽度，不可改变 4.内联元素只能容纳文本或者其他内联元素 spa是行元素 CSS的盒子模型 盒子模型是CSS的基石之一i，它指定元素如何显示以及（在某种程度上）如何相互交互 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。 网页就是由许多个盒子通过不同的排列方式（上下排列、并列排列、嵌套排列）堆积而成。 网页布局主要是div+css布局

<link rel="stylesheet" type="text/css" href="mystyle.css"> 字体 font-family:"字体";　　　字体 font-size:12px;　　　　大小 color:　　　　　　　　　颜色 font-weight:bold;　　　　　　文字粗细　　bold加粗　　normal正常 font-style:italic;　　　　　　文字倾斜 　　italic倾斜　　normal正常 font-decoration：underline;　　　　下划线　　overline　　上划线　　line-through　　删除线 text-transform:capitalize　　　　单词首字母大写　　uppercase全部大写　　lowercase全部小写 text-align:center;　　　　(水平对齐)居中对齐，left左对齐，right右对齐， vertical-align:middle;　　(垂直对齐）居中对齐，top顶部对齐，bottom底部对齐 line-height:　　　　行高（1.5倍—2倍字体大小） 背景与前景 background-color:#000000;　　　　背景色 background-image:url(路径);　　　　背景图片 background-attachment:fixed:　　　

盒模型 content-box 内容盒 - 内容就是盒子的世界 border-box 边框盒 - 框架材质盒子的世界 公式 内容盒 content-box width = 内容宽度 .con { margin : 25px ; border : 5px solid red ; padding : 15px ; box-sizing : content-box ; width : 100px ; } 此处设置的宽度仅仅指的是内容的宽度，不包含内、外边距和边框的尺寸！！ 边框盒 border-box width - 内容宽度 + padding + border .bor { margin : 25px ; border : 5px solid red ; padding : 15px ; box-sizing : border-box ; width : 100px ; } 此处的宽度指的是从边框的最左边到最后面的距离！！！ margin - 外边距 1、盒子的外边框，他是完全透明的，开发者只可以设置它的边距。 2、margin包含了上下左右四条边，开发者可以单独设置每一条边的边距，也可以同时设置四条边的宽度 单独设置 margin-top 上边距 margin-buttom 下边距 margin-left 左边距 margin-right 右边距 同时设置 margin：30px

文章目录 1、配置线条与边框 水平分隔线元素 边框属性与间距属性 边框属性 边框样式属性 内边距属性 2、图像类型 图片互换格式（GIF）图片 透明度 动画 压缩 优化 交错 联合照片专家小组（JPEG）图像 压缩 优化 渐进式JPEG 可移植网络图形格式（PNG）图像 新型的WebP图像格式 3、图像元素 无障碍访问和图像 图像超链接 4、HTML5视觉元素 HTML5 Figure元素 HTML5 Figcaption元素 HTML5 Meter元素 HTML5 Progress元素 5、背景图像 background-image属性 同时配置背景色和背景图 浏览器显示背景图 background-repeat属性 background-position属性 background-attachment属性 6、更多有关图像的知识 图像映射 映射元素 区域元素 配置收藏图标 7、图片使用原则 图像使用指导原则 图片重用 权衡图片大小和质量 考虑图片的下载时间 使用合适的分辨率 指定维度 注意亮度与对比度 8、CSS3视觉效果 CSS3 background-clip属性 CSS3 background-origin属性 CSS3中对多张背景图像的处理 CSS3圆角效果 CSS3 box-shadow属性 CSS3的opacity属性 1、配置线条与边框

盒模型 从内到外：content < padding < border < margin border(边框) 同时设置四条边： border-width:2px; /* 边框宽度 */ border-style:solid; /* solid(单实线),double(双实线),dashed(虚线),dotted(点线)*/ border-color:white; /* 边框颜色默认和文字颜色保持一致*/ border:2px solid white; /* 组合写法(注意顺序)*/ 四条边分开设置: border-top:2px solid white; border-left:2px solid white; border-right:2px solid white; border-bottom:2px solid white; 宽度组合写法： border-width: 2px; /*四条边*/ border-width: 1px 2px; /*上下1px,左右2px*/ border-width: 1px 2px 3px; /*上1px,左右2px,下3px*/ border-width: 1px 2px 3px 4px; /*上1px,右2px,下3px,左4px*/ outline(轮廓线) 当某个元素获得焦点的时候会出现轮廓线,最典型的就是文本框 outline

##页面制作过程## 页面制作过程前言： <ul> <li>页面的制作过程</li> <li>如何划分区域</li> <li>划分区域中的CSS知识</li> </ul> ###页面制作过程### 由设计师设计好设计稿，再由我们前端工程师制作页面： <br>1.划分页面区域（最重要，且很复杂） <br>2.填充内容 ###如何划分区域### <ul> <li>用合适的元素来表示不同的区域(HTML)</li> <li>设置区域的位置、尺寸、背景等样式(CSS)</li> </ul> ###划分区域中的CSS知识### 每个元素都会在页面中生成一个矩形区域，CSS称该矩形区域为盒子(box) 盒子相关知识： <ul> <li>盒模型：单个盒子的组成</li> <li>视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）</li> <li>布局：实际应用</li> </ul> ##盒模型## ###盒模型概述### ####盒子的分类#### 不同的元素产生的盒子类型可能不同，一个元素，产生什么样的盒子，取决于它CSS的display属性 <br>display:none=>不生成盒子 <br>display:innline=>行盒 <br>display:block=>块盒 <br>display:其他取值=>其他盒子 ####盒子的组成#### <br>margin:外边距

html是什么 html（Hypertext Markup Language）—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间—— 标签名 语言 css 凡是写在标签名后面的都是标签的属性 可以自动刷新浏览器 属性名称 = “属性值” border <!-- border 边框的粗细（宽度） 边框的样式 solid dotted dashed 边框的颜色 英文单词 red 十六进制 #8c8c8c rgb() red green blue --> border 区域会不会显示背景图(会显示) < style > .box { width : 300 px ; height : 200 px ; border : 10 px d #0c0c0c ; background : url( "img/14.jpg" ) repeat-y ; margin : 40 px 30 px 20 px 10 px ; } </ style > </ head > < body > < div class = "box" > </ div > </ body > border-color 边框颜色 border-style 边框样式 border-width 边框宽度 border -top border -top -color border -top -style border

*/ /*--> */ 盒模型 CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含 边界、边框、补白、内容区域 网页中的大部分对象，实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的。 盒模型关系到网页设计中排版、布局、定位等操作，任何元素都必须遵循盒模型规则。 包含： margin border padding content(内容) padding(内边距) 设定页面中一个元素内容到元素边缘（边框）之间的距离 规定了内容到达元素边缘的位置关系 规定了子元素与父元素的位置关系 注* Padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的padding值 border(边框属性) 语法： border:边框宽度 边框风格 边框颜色 border-style:设定边框风格 border-style:none(无)/solid(实现)/dotted(点划线)/dashed(虚线)/double(双线) border-width:设定边框宽度 border-width:数值 单位px border-color:设定边框颜色 border-color:颜色 边框类型：（不常用属性值）groove定义3D凹槽边框 ridge定义3D垄状边框 inset outset定义3D边框（都取决于边框颜色） margin