栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

HTML&&CSS总结报告

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

HTML&&CSS总结报告

##1.html为超文本语言,用于构建web网页

文件后缀为.html,并可以在浏览器中打开

##2.HTML元素(elements)

HTML 使用"标记"(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 ,,<body>,<header>,<footer>,,<section>,<p>,,,,,,<canvas>,<datalist>,<details>,<embed>,<nav>,<output>,<progress>,<video> 等等</p> <p>##3.注释</p> <p>用特殊的记号<!--和-->包括起来,一般注释的快捷键为:ctrl+/</p> <p>HTML 不区分标签的大小写,建议全部使用小写!</p> <p>一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, , 等等。我们称其为空元素</p> <p></p> <p>元素的属性</p> <p>包含如下内容:</p> <p></p> <p>一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)</p> <p>属性名称,后面跟着一个 = 号。</p> <p>一个属性值,由一对引号 "" 引起来。</p> <p></p> <p>##4.标题</p> <p>HTML 提供了从大到小6级标题,分别是: ~ </p> <p>##5文本格式</p> <p>p>可以使用mark标记来<mark>highlight</mark> text.</p><p><del>该文本行被视为已删除的文本<p><s>这一行文本将被视为不再准确。</s></p> <p><ins>这一行文本被视为文档的新增内容。</ins>< <p><u>这一行文本将显示为带下划线的</u></p><p><small>这一行文本被视为小字。</small></p> <p>这一行粗体显示<p><em>这一行以斜体显示。</em></p></p> <p>##6.超链接</p> <p>超链接语法</p> <p>百度一下</p> <p>锚点</p> <p>锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。</p> <p></p> <p>先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。</p> <p>##7.图片与文件路径</p> <p>在 HTML 标签中, 标签用于定义 HTML 页面中的图像。</p> <p></p> <p>单词 image 的缩写,意为图像。</p> <p>src 是标签的必须属性,它用于指定图像文件的路径和文件名。</p> <p>所谓属性:简单理解就是属于这个图像标签的特性。</p> <p>图像标签属性注意点:</p> <p>① 图像标签可以拥有多个属性,必须写在标签名的后面。</p> <p>② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。</p> <p>③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。</p> <p>2. 路径</p> <p>(1)目录文件夹和根目录:</p> <p>实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。</p> <p>**目录文件夹:**就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。</p> <p>**根目录:**打开目录文件夹的第一层就是根目录</p> <p>1. 相对路径</p> <p>**相对路径:**以引用文件所在位置为参考基础,而建立出的目录路径。</p> <p>这里简单来说,图片相对于 HTML 页面的位置</p> <p>相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级 、下一级和同一级就是图片相对于 HTML 页面的位置。</p> <p>2. 绝对路径</p> <p>**绝对路径:**是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。</p> <p>##8.HTML 中的注释和特殊字符</p> <p>1 注释</p> <p>如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。</p> <p>HTML中的注释以“<!--”开头,以“ -->”结束。</p> <p><!-- 注释语句 -->      快捷键: ctrl +  /</p> <p>一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.</p> <p>添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的</p> <p>2 特殊字符</p> <p>在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。</p> <p></p> <p>空格 、大于号、 小于号 重点记住</p> <p>6.表格标签</p> <p>6.1.表格的主要作用</p> <p>1.表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理</p> <p>2.表格不是用来布局页面的,而是用来展示数据的。</p> <p>表格的基本语法</p> <p><table></p> <p>     <tr></p> <p>        <td>单元格内的文字</td></p> <p>        ...</p> <p>     </tr></p> <p>     ...</p> <p></table></p> <p>1. <table> </table> 是用于定义表格的标签。</p> <p>2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。</p> <p>3. <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。</p> <p>4. 字母 td 指表格数据(table data),即数据单元格的内容。</p> <p>6.3 表头单元格标签</p> <p>一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.</p> <p>    <th> 标签表示 HTML 表格的表头部分(table head 的缩写)</p> <p>1</p> <p>2</p> <p><table></p> <p>    <tr></p> <p>        <th>姓名</th></p> <p>        ...</p> <p>    </tr></p> <p>    ...</p> <p></table></p> <p>css基础知识:</p> <p>css样式表的定义</p> <p>css:(Cascading Style Sheets)层叠样式表;</p> <p>分类及位置:内部样式-head区域style标签里面</p> <p>外部样式-link调用</p> <p>内联样式-标签元素里面</p> <p>css内的注释:</p> <p>css样式表的语法</p> <p>CSS规则由两个主要的部分构成:要添加样式的盒子名或者标签名、和要添加的样式。</p> <p></p> <p>盒子名或者标签名{属性:值;}</p> <p>CSS中几种颜色的表示方法</p> <p>用颜色名表示</p> <p>17个自带颜色:</p> <p>aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,</p> <p>  olive, orange, purple, red, silver, teal, white, and yellow</p> <p>可以用十六进制的颜色值表示(红、绿、蓝),通常称RGB</p> <p>用rgb(r,g,b)函数表示</p> <p></p> <p>用hsl(Hue,Saturation,Lightness)函数表示(色调、饱和度、亮度)</p> <p></p> <p>用rgba(r,g,b,a)函数表示</p> <p>其中a表示的是改颜色的透明度,取值范围是0~1,其中0代表完全透明</p> <p>用hsla(Hue,Saturation,Lightness,alpha)函数表示</p> <p>色调、饱和度、亮度、透明度</p> <p></p> <p>内部样式表</p> <p>当单个页面需要设置样式时,就应该使用内部样式表。</p> <p>使用 <style></style>标签在文档<head></head>里面定义内部样式表</p> <p></p> <p><head></p> <p> <style type="text/css" ></p> <p>  p{color:blue;}</p> <p> </style></p> <p></head></p> <p></p> <p>从外部引入到样式分为两种:</p> <p>当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css文件,然后引用到我们的页面中。</p> <p></p> <p>Link样式表式: <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)></p> <p></p> <p>Html式: <style type="text/css">@import url("css.css");></style></p> <p></p> <p>内联样式表(优先级高)</p> <p></p> <p>写在标签里面的样式</p> <p></p> <p>如:<p ></p></p> <p>给p标签里面的文字颜色设置为红色</p> <p></p> <p>区别:外链样式与导入样式</p> <p></p> <p>link标签是属于xhtml范畴,而@import则是css2.1中特有的。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。</p> <p></p> <p>加载的顺序的区别,link加载的css时,是一种并行(没有尝试是否是这样)加载CSS方式,而@impor则在整个页面加载完成后才加载。</p> <p></p> <p>在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别,此时@import就无能为力了。</p> <p></p> <p>样式的优先级补充</p> <p>相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):</p> <p>内联样式表(标签内部) > 嵌入样式表(当前文件中)> 外部样式表(外部文件中)</p> <p>权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式</p> <p></p> <p>层叠优先级是:</p> <p></p> <p>浏览器缺省< 外部样式表 < 内部样式表 < 内联样式</p> <p>其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器</p> <p>派生选择器以前叫上下文选择器,所以完整的层叠优先级是:</p> <p></p> <p>浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级</p> <p>另外,如果同一个元素在没有其他样式的作用影响下,其Class定义了多个并以空格分开,其优先级顺序为:</p> <p></p> <p>一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!</p> <p>css选择器:</p> <p>class类选择器可以重复利用</p> <p>id选择器唯一</p> <p>标签选择器</p> <p>什么是选择器:css选择器就是要改变样式的对象</p> <p>选择器{属性:值;属性:值;}</p> <p></p> <p>标签选择器:页面中所有的标签都是一个选择器 p{color:red;}</p> <p></p> <p>ID选择器</p> <p></p> <p>选择id命名的元素 以 # 开头 #p1{color:#0f0;}</p> <p>类选择器</p> <p></p> <p>class选择器,选择clas命名的元素 以.开头 .first{color:#00f;}</p> <p>css代码写完后上线前要经过压缩处理</p> <p>本地和服务器分两个css版本(备份)</p> <p>压缩后注释都清除,空间体积减少</p> <p></p> <p>群组选择器</p> <p></p> <p>选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}</p> <p>包含选择器</p> <p>选择某元素的后代元素,也称后代选择器,父类与子类间以空格隔开p</p> <p>span{color:red;}</p> <p>属性选择器</p> <p></p> <p>选择包含某一属性的元素</p> <p>a[title]{color:red;} 选择包含title的a标签</p> <p>a[title][href]{color:red;} 选择包含title和href的a标签</p> <p>> + 选择器子类选择器:只选择子元素(只选择儿子)(相当于包含元素)</p> <p></p> <p>p > span{color:red;}</p> <p>相邻兄弟选择器:只选择后面的相邻兄弟元素</p> <p>p + span{color:red;}</p> <p></p> <p>css选择器</p> <p></p> <p>伪类选择器</p> <p>a:link {color:#FF0000;} / 未访问的链接 / (只用于a标签)</p> <p>a:visited {color:#00FF00;} / 已访问的链接 / (只用于a标签)</p> <p>a:hover {color:#FF00FF;}(可和其他标签结合一起用)</p> <p>a:active {color:#0000FF;} / 选定的链接 /</p> <p></p> <p>注意</p> <p>伪类选择器的排序很重要,a:link a:visited a:hover a:active,记作lvha</p> <p>输入伪类选择器(针对表单)</p> <p></p> <p>input:focus{color:red;} / 键盘输入焦点 /</p> <p>其他伪类选择器</p> <p></p> <p>p:first-child{color:red;} </p> <p>:before 在元素之前添加内容。</p> <p>:after 在元素之后添加内容。</p> <p>css优先规则</p> <p></p> <p>内联样式表-> ID 选择器—> Class 类选择器->标签选择器</p> <p>背景属性:</p> <p></p> <p>背景颜色的添加:</p> <p>background:red;</p> <p>backgronnd-color:red;</p> <p>背景图片的添加:</p> <p>background:url(“images/0.jpg”);</p> <p>backgronnd-image:url(“images/0.jpg”);</p> <p></p> <p>背景的平铺</p> <p>平铺就是图片是否重复出现</p> <p>不平铺:background-repeat:no-repeat;</p> <p>水平方向平铺:background-repeat:repeat-x;</p> <p>垂直方向平铺:background-repeat:repeat-y;</p> <p>完全平铺:默认为完全平铺</p> <p>背景图片的定位</p> <p>背景图片的定位就是可以设置显示背景图片的位置,通过属性background-position来实现</p> <p>background-position的取值可为英文单词或者数值和百分值。</p> <p>background-positon的英文单词取值</p> <p>top left</p> <p>top center</p> <p>top right</p> <p>center left</p> <p>center center</p> <p>center right</p> <p>bottom left</p> <p>bottom center</p> <p>ottom right</p> <p>background-positon的数值取值</p> <p>background-position:x y;</p> <p>positon的百分值取值</p> <p>background-position:x% y%;</p> <p>背景图片的大小</p> <p></p> <p>背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。</p> <p>background-size的数值取值</p> <p>background-size:x y;</p> <p>background-size的数值取值</p> <p>background-size:x% y%;</p> <p></p> <p>背景图片的滚动</p> <p>背景图片是否随着内容的滚动而滚动由background-attachment设置</p> <p>background-attachment:fixed; 固定,不随内容的滚动而滚动</p> <p>background-attachment:scroll; 滚动,随内容的滚动而滚动</p> <p></p> <p>css文字文本属性:</p> <p>文字属性</p> <p>color:red; 文字颜色</p> <p>font-size:12px; 文字大小</p> <p>font-weight:“bold” 文字粗细(bold/normal)</p> <p>font-family:“宋体” 文字字体</p> <p>font-variant:small-caps小写字母以大写字母显示</p> <p>文本属性</p> <p>text-align:center; 文本对齐(right/left/center)</p> <p>line-height:10px; 行间距(可通过它实现文本的垂直居中)</p> <p>text-indent:20px; 首行缩进</p> <p>text-decoration:none;</p> <p>文本线(none/underline/overline/line-through)</p> <p>letter-spacing: 字间距</p> <p></p> <p>盒子模型</p> <p></p> <p>即一个有高度和宽度的矩形区域</p> <p>所有html标签都是盒子模型</p> <p>div标签自定义盒子模型</p> <p>所有的标签都是盒子模型</p> <p>class和id的主要差别是:class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的唯一的元素。</p> <p></p> <p>盒子模型的组成</p> <p>盒子模型组成部分:</p> <p>自身内容:width、height 宽高</p> <p>内边距: padding</p> <p>盒子边框: border 边框线</p> <p>与其他盒子距离: margin外边距</p> <p>内容+内边距+边框+外边距=面积</p> <p>border 边框</p> <p>常见写法 border:1px solid #f00;</p> <p>单独属性:</p> <p>border-width:</p> <p>border-style:</p> <p>dotted 点状虚线</p> <p>dashed(虚线)</p> <p>solid(实线)</p> <p>double(双实线)</p> <p>border-color (颜色)</p> <p>padding 内边距</p> <p>值:像素/厘米等长度单位、百分比</p> <p>padding:10px; 上下左右</p> <p>padding:10px 10px; 上下 左右</p> <p>padding:10px 10px 10px; 上 左右 下</p> <p>padding:10px 10px 10px 10px; 上 右 下 左(设置4个点–>顺时针方向)</p> <p></p> <p>单独属性:</p> <p>padding-top:</p> <p>padding-right:</p> <p>padding-bottom:</p> <p>padding-left:</p> <p>当设置内边距的时候会把盒子撑大,为了保持盒子原来的大小,应该高度和宽度进行减小,根据width和height减小</p> <p>margin 外边距</p> <p>值:与padding相同</p> <p>单独属性:与padding相同</p> <p>外边距合并:两个盒子同时设置了外边距,会进行一个外边距合并</p> <p>块元素、行元素与溢出</p> <p>基本概念</p> <p>块级元素:默认情况下独占一行的元素,可控制宽高、上下边距;</p> <p>行内元素:默认情况下一行可以摆放多个的元素,不可控制宽高和上下边距</p> <p>行块转换</p> <p>display:none; 不显示</p> <p>display:block; 变成块级元素</p> <p>display:inline; 变成行级元素</p> <p>display:inline-block; 以块级元素样式展示,以行级元素样式排列</p> <p>溢出</p> <p>overflow:hidden; 溢出隐藏</p> <p>overflow:scroll; 内容会被修剪,浏览器会显示滚动条</p> <p>overflow:auto; 如果内容被修剪,则产生滚动条</p> <p>文本不换行:white-space:nowrap;</p> <p>长单词换行:word-wrap:break-word;</p> <p>行内元素和快级元素小结</p> <p></p> <p>一、块级元素:block element</p> <p>每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;</p> <p>块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如只能包含块级元素。</p> <p>DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。</p> <p></p> <p>二、行内元素:inline element</p> <p>也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN元素,IFRAME元素和元素样式的display : inline的都是行内元素。</p> <p>三、block(块)元素的特点:</p> <p></p> <p>①、总是在新行上开始;</p> <p>②、高度,行高以及外边距和内边距都可控制;</p> <p>③、宽度缺省是它的容器的100%,除非设定一个宽度。</p> <p>④、它可以容纳内联元素和其他块元素</p> <p></p> <p>inline元素的特点</p> <p></p> <p>①、和其他元素都在一行上;</p> <p>②、高,行高及外边距和内边距不可改变;</p> <p>③、宽度就是它的文字或图片的宽度,不可改变</p> <p>④、内联元素只能容纳文本或者其他内联元素</p> <p></p> <p>对行内元素,需要注意如下:</p> <p>设置宽度width 无效。 设置高度height无效,可以通过line-height来设置。 设置margin</p> <p>只有左右margin有效,上下无效。</p> <p>设置padding只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。</p> <p></p> <p>常见的块状元素</p> <p></p> <p>address – 地址</p> <p>blockquote – 块引用</p> <p>center – 举中对齐块</p> <p>dir – 目录列表</p> <p>div – 常用块级容易,也是CSS layout的主要标签</p> <p>dl – 定义列表</p> <p>fieldset – form控制组</p> <p>form – 交互表单</p> <p>h1 – 大标题</p> <p>h2 – 副标题</p> <p>h3 – 3级标题</p> <p>h4 – 4级标题</p> <p>h5 – 5级标题</p> <p>h6 – 6级标题</p> <p>hr – 水平分隔线</p> <p>isindex – input prompt</p> <p>menu – 菜单列表</p> <p>noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容</p> <p>noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)</p> <p>ol – 有序表单</p> <p>p – 段落</p> <p>pre – 格式化文本</p> <p>table – 表格</p> <p>ul – 无序列表</p> <p></p> <p>常见的内联元素</p> <p>a – 锚点</p> <p>abbr – 缩写</p> <p>acronym – 首字</p> <p>b – 粗体(不推荐)</p> <p>bdo – bidi override</p> <p>big – 大字体</p> <p>br – 换行</p> <p>cite – 引用</p> <p>code – 计算机代码(在引用源码的时候需要)</p> <p>dfn – 定义字段</p> <p>em – 强调</p> <p>font – 字体设定(不推荐)</p> <p>i – 斜体</p> <p>img – 图片</p> <p>input – 输入框</p> <p>kbd – 定义键盘文本</p> <p>label – 表格标签</p> <p>q – 短引用</p> <p>s – 中划线(不推荐)</p> <p>samp – 定义范例计算机代码</p> <p>select – 项目选择</p> <p>small – 小字体文本</p> <p>span – 常用内联容器,定义文本内区块</p> <p>strike – 中划线</p> <p>strong – 粗体强调</p> <p>sub – 下标</p> <p>sup – 上标</p> <p>textarea – 多行文本输入框</p> <p>tt – 电传文本</p> <p>u – 下划线</p> <p>可变元素</p> <p>可变元素为根据上下文语境决定该元素为块元素或者内联元素。</p> <p>applet - java applet</p> <p>button - 按钮</p> <p>del- 删除文本</p> <p>iframe - inline frame</p> <p>ins - 插入的文本</p> <p>map - 图片区块(map)</p> <p>object - object对象</p> <p>script - 客户端脚本</p> <p>行内元素与块级元素有什么不同</p> <p>区别一:</p> <p>块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度</p> <p>行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。</p> <p>区别二:</p> <p>块级:块级元素可以设置宽高</p> <p>行内:行内元素不可以设置宽高</p> <p>区别三:</p> <p>块级:块级元素可以设置margin,padding</p> <p>行内:行内元素水平方向的margin-left; margin-right;</p> <p>padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。</p> <p>区别四:</p> <p>块级:display:block;</p> <p>行内:display:inline;</p> <p>替换元素有如下:(和img一样的设置方法)</p> <p>、<input>、<textarea>、<select></p> <p><object>都是替换元素,这些元素都没有实际的内容</p> <p>可以通过修改display属性来切换块级元素和行内元素</p> <p>元素的显示与隐藏</p> <p>Display,display:none(block);隐藏对象,不再占有原来的位置。</p> <p>Visibility,visibility:visible;元素可视</p> <p>visibility:hidden;隐藏起来但是位置保留!!!!!</p> <p>Overflow</p> <p>就是对于我们溢出部分的处理,是隐藏还是显示。</p> <p>Overflow:visible,hidden,scroll(显示滚动条来隐藏),auto(需要的时候展示滚动条);----内容短,不展示滚动条,内容长,展示滚动条,可以拉动滚动条观看内容。</p> <p>CSS元素显示模式</p> <p>元素(标签)以什么方式进行显示。</p> <p></p> <p>两大元素</p> <p>块元素</p> <p></p> <p><p><ul><ol><li>,其中是最典型的块元素。</p> <p></p> <p>特点:</p> <p></p> <p>比较霸道,自己独占一行。</p> <p>可设置宽度高度内外边距。</p> <p>宽度默认父级100%。</p> <p>是个容器,可以放任何元素。</p> <p>注意事项:</p> <p></p> <p>文字元素不允许放块元素,比如,<p>,这些都是拿来放文本的。</p> <p>行元素</p> <p>,,,<em>,<i>,<del>,<s>,<ins>,<u>,等,是最典型的行元素。行元素又可以叫内联元素。</p> <p></p> <p>特点:</p> <p>相邻行内元素在一行上,一行可以显示多个。</p> <p>高度,宽度设置无效。</p> <p>默认宽度是内容本身的宽度。</p> <p>行内元素只能容纳文本或者其他行内元素。</p> <p>注意事项:链接里面不能放链接!!特殊情况,里面可以放块元素。</p> <p>行内块元素</p> <p>行内标签有几个特殊的标签 <input/> <td>,他们同时具有行内元素和块元素的特点,有些资料称他们为行内块元素。</p> <p>特点:</p> <p>一行显示多个,和相邻的行内或行内块之间有空白间隙。</p> <p>默认宽度是内容本身的宽度。</p> <p>可以设置高度宽度内外边距。</p> <p>CSS元素显示模式转换</p> <p>一个模式的元素需要另外一种模式的特性。</p> <p>语法:</p> <p>转为块元素:display:block;行内元素:display:inline;行内块:display:inline-block;</p> <p>Tips:让行高等于格子的高度。</p> <p>CSS字体属性</p> <p>CSS Fonts属性</p> <p>font-family:‘宋体’;</p> <p>font-family:‘微软雅黑’;</p> <p>字体大小</p> <p>font-size:20px(20像素的意思,px是单位)</p> <p>字体粗细</p> <p>font-weight:700;</p> <p>文字样式</p> <p>font-style:normal/italic,平常或者斜体。</p> <p>CSS复合属性</p> <p>font: italic 700 16px '微软雅黑';</p> <p></p> <p>CSS文本属性</p> <p></p> <p>文本颜色</p> <p>color定义文本颜色</p> <p></p> <p>对齐文本</p> <p>text-align:center;</p> <p></p> <p>装饰文本</p> <p>text-decoration属性规定添加到文本的修饰。</p> <p>none.默认。没有装饰。</p> <p>underline.下划线</p> <p>overline.上划线</p> <p>line-throgh.删除线</p> <p></p> <p>文本缩进</p> <p></p> <p>text-indent:20px;</p> <p></p> <p>2em就是两个当前元素文字大小</p> <p></p> <p>行间距</p> <p></p> <p>line-height: 26px;</p> <p></p> <p>CSS三大属性</p> <p>层叠性</p> <p>Div{color:red}div{color:pink}</p> <p></p> <p>如果冲突,就近原则。会覆盖之前的。最后是粉色。</p> <p></p> <p>继承性</p> <p>子标签会继承某些 父标签的属性。</p> <p></p> <p>font:12px/1.5 .这个1.5就是当前文字大小的1.5倍。</p> <p></p> <p>优先性</p> <p>选择器相同,则执行层叠性。</p> <p>选择器不同,根据选择器权重执行。</p> <p>从小到大:</p> <p></p> <p>继承<元素选择器<类选择器<ID选择器<行内样式<!Important</p> <p>越精确,优先级越高,但是父亲那里继承的只算在父亲那一层。.</p> <p></p> <p>margin属性:</p> <p>行内元素是没有上下外边距的,只有左右外边距,所以尽量不要设置行内元素的内外上下边距,设计宽高也是无效的</p> <p>两个相邻的块级元素一个设置了margin-bottom、另一个设置margin-top的时候,会发生外边距塌陷。两个元素之间的margin值会合并,margin值最终取较大值。</p> <p>嵌套块元素垂直边距合并,当父级元素没有设置border、padding的情况下,父子元素的margin边距会合并,其取值为较大值</p> <p>css的选择器有:标签、类、ID、全局、组合、后代、兄弟、伪类、伪元素选择器。</p> <p></p> <p>弹性布局父元素属性</p> <p>flexdirection :row / row-reserve / column / column-reserve (排序方式)</p> <p>flex-wrap : nowrap / wrap / wrap-reserve (超出是否换行)</p> <p>align-items : flex-start / center / flex-end / baseline (纵向对齐方式)</p> <p>justify-center : flex-start / center / flex-end / baseline (横向对齐方式)</p></div> </div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明:</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div> <div><span class="gray">本文地址:</span><a href="https://www.mshxw.com/it/1007297.html" class="blue">https://www.mshxw.com/it/1007297.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1007296.html">上一篇 Java学习笔记(三)——2022-7-9</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1007294.html">下一篇 Spring Boot项目打包部署</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>Java相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解(二)设备树语法详解">【Linux驱动开发】设备树详解(二)设备树语法详解</a></li> <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li> <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li> <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流(ObjectOutputStream和ObjectInputStream)">【Java】对象处理流(ObjectOutputStream和ObjectInputStream)</a></li> <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li> <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li> <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍</a></li> <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成</a></li> <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li> <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li> <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li> <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li> <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li> <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口(包含C uci操作)">在openwrt使用C语言增加ubus接口(包含C uci操作)</a></li> <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li> <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li> <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li> <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li> <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li> <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li> </ul> </div> </div> </div> <!-- 公共尾部 --> <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a> <a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a> <a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a> <a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a> <a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a> <a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a> <a href="http://www.mshxw.com/TAG_1/vim.html">vim</a> <a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a> <a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a> <a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a> <a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a> <a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a> <a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a> <a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a> <a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a> <a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a> <a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a> <a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a> <a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a> <a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a> <a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a> <a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a> <a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a> <a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> <div class="dl_ewm"> <div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群"> <p>名师互学网交流群</p> </div> <div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服"> <p>名师互学网客服</p> </div> </div> </div> </div> <div class="copyright"> <p>名师互学网 版权所有 (c)2021-2022 ICP备案号:<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a> </p> </div> </div> <!-- 手机端 --> <div class="m_foot_top"> <img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="https://www.mshxw.com/about/index.html">关于我们</a> <a href="https://www.mshxw.com/archiver/">文章归档</a> <a href="https://www.mshxw.com/sitemap">网站地图</a> <a href="https://www.mshxw.com/about/contact.html">联系我们</a> <p>版权所有 (c)2021-2022 MSHXW.COM</p> <p>ICP备案号:<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p> </div> <div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div> <!--广告!--> <script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script> <script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script> <!--头条搜索!--> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <!--头条搜索结束!--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项,自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>