标签：消息 文件 中文字符 简写 str ant 左右 相对 摔跤吧
css一HTML为基础，提供丰富的功能，如字体，颜色背景的控制及配板等
h1 { color:red; font_size:25px; } 1:h1是选择器，用于指定CSS样式作用的HTML对象 2：属性和属性值以“键值对”的形式出现
font-size用于设置字号，一般用像素单位px
<style type="text/css"> h2 { font-size: 34px; color: pink;
} </style>
font-family属性设置字体，长用字体有宋体，微软雅黑，黑体，
h2 { font-family: "微软雅黑" color: pink; }
font-weight属性定义字体的粗细，可用属性值为：normal，bolder,lighter,100-900(100的整数倍，数字400等价位 normal，700等价于 bold,更喜欢用数字来表示)
span { font-weight: 800; /* 字体的加粗效果 */ } strong { font-weight: normal; /* 让加粗的字体不加粗 */ }
h4{ font-size: 16px; font-style: italic; /* 让字体倾斜 */ } 平时我们很少给字体倾斜，反而喜欢给斜体标签（em,i）改为默认值
h2 { /* font-family: "微软雅黑" *//* 设置字体 */ color: pink; /* font: font-style font-weight font-size/line-height font-family; */ font: italic bold 30px "微软雅黑"； }
必须按照（font: font-style font-weight font-size/line-height font-family;）这个顺序；
要将CSS的样式引用于特别的HTML元素，首先要找到该目标元素。在CSS中，执行这一任务的样式规则部分被成为选择器。
标签选择器是指用HTML标签名称作为选择器
语法：
定义： .类名{属性1：属性值1；属性2：属性值2；} 调用： class=类名
长名字或词组可以使用中横线来选择器命名，不建议使用纯数字或英文字母来表示、
<head> <meta charset="UTF-8"> <title>Document</title> <style> .font14 { font-size: 14px; } .font30 { font-size: 30px; } .pink { color: pink; } .skybule { color: skybule; } </style> </head> <body> <div class="font30 pink">亚瑟</div> <div class="font14 skybule">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14 skybule">貂蝉</div> <div class="font14 pink">西施</div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .font36{ font-size: 100px; } .syebule { color: skyblue; } .red { color: red; } .orgle { color: orange; } .green { color: green; } </style> </head> <body> <span class="font36 syebule">G</span> <span class="font36 red">o</span> <span class="font36 orgle">o</span> <span class="font36 syebule">g</span> <span class="font36 green">l</span> <span class="font36 red">e</span> </body>
#id名{属性1：属性值1； 属性2=属性值2；}
<style> #big {color: pink;} #two {color: yellow;} #srong{color: green;} </style> </head> <body> <div id="big">熊大</div> <div id="two">熊二</div> <div id="strong">光头强</div>
类选择器和id选择器的区别：
类选择器可以重复使用，id选择器相当于身份证号，是唯一的，只允许使用一次
*{属性1=属性值1；属性2=属性值2}
不常用
<style> a:link{ /* 未访问的连接 */ font-size: 20px; color: gray; font-weight: 700; } a:visited{ /* 已访问的连接 */ font-size: 20px; color: orange; font-weight: 700; } a:hover{ /* 鼠标移动到连接上 */ font-size: 20px; color:red; font-weight: 900; } a:active{ /* 选定连接 */ font-size: 20px; color: green; font-weight: 900px; } </style> </head> <body> <!-- <h2>为类选择器中，连接伪类选择器，主要针对于 a</h2> --> <div><a href="#">秒杀</a></div> <!-- 注意：他们的顺序一定不能颠倒，按照lvha的顺序，love hate记忆法 --> </body>
注意：他们的顺序一定不能颠倒，按照lvha的顺序，love hate记忆法
实际工作中。我们只用当鼠标经过的时候的连接伪类选择器，案例如下；其他都不需用
<style> a { font-size:16px; color: gray; font-weight: 700; } a:hover { color: red; } </style> </head> <body> <div><a href="#">秒杀</a></div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> li:first-child { /* 选择第一个孩子 */ color: pink; } li:last-child { /* 选择最后一个孩子 */ color: skyblue; } li:nth-child(4) { /* 选择第四个孩子， n 代表第几个的意思 */ color: purple; } li:nth-child(even){ color: deeppink; /* 可以选择所有的偶数 even 偶数 的孩子标签 */ } li:nth-child(2n+1) { /* n 0 2n 2n+1 3n 可以选择所有的数 */ color: yellow; } </style> </head> <body> <ul> <li>第一个孩子</li> <li>第二个孩子</li> <li>第三个孩子</li> <li>第四个孩子</li> <li>第五个孩子</li> <li>第六个孩子</li> <li>第七个孩子</li> </ul> </body>
：target目标选择器，可用于选取当前活动的目标元素
<style> :target{ color: red; font-size: 30px; } </style>
<style> .red { color: red; } li:nth-child(2) { color: #14e6ac; } </style> </head> <body> <h3>color属性用于定义颜色，器取值方法有以下的三种</h3> <ur> <li class="red">预定的颜色值，如red,green，blue等</li> <li>十六进制，如#FF0000，#FF6600，十六进制是最常用的定义颜色的方式</li> <li>RGB代码，如红色可以表示rgb(255,0,0)</li> </ur> </body>
1：line-height属性用于设置行间距，就是行与行之间的距离，及字体的垂直距离，一般称为行高，
line-height常用的属性值单位有 三种，像素px,相对值em,和百分比。
一般情况，行距比字号大7.8就可以了
2：水平对齐方式
text-align属性用于设置文本内容的水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
3：首行缩进
text-indent属性用于设置首行缩进，建议em作为单位
1em是一个字的宽度，如果是汉字宽度，1em就是一个汉字的宽度。
<style> p { line-height: 26px; /* line-height属性用于设置行间距 */ } h3 { text-align: center; /* text-align属性用于设置文本内容的水平对齐方式 */ } p { text-indent: 2em; /* text-indent属性用于设置首行缩进，建议em作为单位 */ } </style>
1：letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白，其属性值可为不同单位的数值，允许使用负值，默认normal。
2：word-spacing属性用于定义英文单词之间的距离，对中文字符无效。
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { letter-spacing: 3px; } p{ word-spacing: 5px; } </style> </head> <body> <div>我是熊大</div> <p>my name is andy!</p> </body>
<style> h1 { color: rgba(0,0,0,0.5); 0~1之间，四个参数不能省略 } </style> </head> <body> <h1>文字是可以半透明的</h1> </body>
text-shadow属性设置阴影，
<style> h1 { /* color: rgba(0,0,0,0.5); */ font-size: 100px; text-shadow: 5px 12px 3px rgba(173, 163, 163, 0.5); /* text-shadow: 水平位置 垂直位置 模糊距离 影音颜色； */ } </style> </head> <body> <h1>文字是可以半透明的</h1> </body>
1：div tab
2: div*3
3:ur > p
4:div + p
5: .demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { color: #3c3c3c; /* 一般网页默认的颜色 */ } h1 { text-align: center; /* 文字水平居中 */ font-size: 25px; font-weight: normal; /* 让加粗的字体不加粗 */ } p { text-indent: 2em; /* 首行缩进 */ font-size: 14px; line-height: 24px; /* 行间距 */ letter-spacing: 1px; /* 定义字间距 */ } div { text-align: center; font-size:14px; } .sport { color: #f40; } .packtake { color: #f00; } .co { font-weight: 700 } a:hover { color: #f00; } em { font-style: normal; /* 让倾斜的字体不倾斜 */ color: skyblue; } </style> </head> <body> <h1>中医队赛前突然换帅仍胜伊藤 高原黑马欲阻击舜天</h1> <div>2017年07月16日20:11 <span class="sport">新浪体育 评论中大奖</span> (<a href="#" class="packtake">11</a>参与） <a href="#">收藏文本</a></div><hr> <p>专题摘要6月19日-7月14日，2017赛季夏季<em>[微博]</em>转会窗口将开放，在中超新政策之下，16支球队又会有怎样的动作，让我们拭目以待。陈子豪决赛轮交出72杆，总成绩-1，并列第33位。黄文义72杆，总成绩+2，并列第43位。吴红富76杆，总成绩+4，并列第49位。元天74杆，总成绩+7，并列第56位。汤榕健和叶剑锋均交出79杆，总成绩+10，并列第69位。杨伊农82杆，总成绩+19，单独第64位</p> <p>2017年10月23日 - 2017<em>[微博]</em>佛山公开赛-欧洲挑战巡回赛暨中国男子职业高尔夫巡回赛圆满落幕,中国球手张蕙麟成为赛事历史上唯一一位两次获得这一奖项的球员。新浪体育 | 2017年10月23日 08...</p> <p>北京时间10月22日消息。2017<<em>[微博]</em>佛山公开赛今日在佛山高尔夫俱乐部落下战幕。威尔士球手奥利弗-法尔（Oliver Farr）五杆优势大胜，赢得个人第二座欧巡挑战赛冠军。张蕙麟在中国球手中表现最佳，获得并列第6位。手握五杆优势出发的法尔今日打出5只小鸟，吞下两记柏忌，打出低于标准杆3杆的69杆，总成绩270杆（-18，69-66-66-69），最终守住五杆巨大领先，继2014年土航挑战赛后再度问鼎欧巡挑战赛冠军。本场比赛冠军，让法尔获得了8万美元的冠军奖金。</p> </body> </html>
<标签名 style="属性1：属性值；属性2：属性值">内容</标签>
<head> <meta charset="UTF-8"> <title>Document</title> <style> 选择器 { } </style> </head>
连入式是将所有的样式放在以css为扩展名的外部样式表文件中。
<link rel="stylesheet" tyle="text/css" href="css文件路劲" />
-href: 定义所连接外部样式表的URL，
-tyle: 定义所连接文档的类型在这里指定为"text/css",表示连接的外部文件为css.
-rel: 定义当前文档与连接文档之间的关系，在这里指定"stylesheet" 表示被连接的文档是一个样式表文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="text.css" > </head> <body> <div class="demo">连入式是将所有的样式放在以css为扩展名的外部样式表文件中。</div> <div>连入式是将所有的样式放在以css为扩展名的外部样式表文件中。</div> <div>连入式是将所有的样式放在以css为扩展名的外部样式表文件中。</div> </body> </html>
.demo { font-size: 20px; color: pink; }
每个块级元素独自占据一整行或多整行，可以对其设置宽度，高度，对齐属性，长用于网页布局和网页结构的搭建。
<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是典型的块元素
特点：
行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中的文本样式。
常见的行内元素有 <a>,<strong>,<b>,<em,>,<i>,<del>,<s>,<ins>,<span>,其中<span>是典型的行内元素。
行内元素——<img/>,<input/>,<td/>可以给他们设置宽高和对齐属性
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; display: inline; /* 块级标签转换为行内标签 */ } span { width: 100px; height: 100px; background-color: hotpink; display: block; /* 行内标签转换为块及标签 */ } </style> </head> <body> <div>123</div> <div>456</div> <div>789</div> <span>abc</span> <span>efg</span> <span>hij</span> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .singer { /* 类选择器 */ color: #f00; } div.singer { /* 由两个选择器构成，其中第一个为标签选择器，第二个为类选择器， 交集选择器，是并且的意思。即……又……的意思，既是singer 又是div 满足的条件，用的比较少。 */ font-weight: 700; } </style> </head> <body> <div class="singer">刘德华</div> <div class="singer">张学友</div> <p class="singer">汪峰</p> <p class="singer">韩红</p>
<head> <meta charset="UTF-8"> <title>Document</title> <style> p,div,h1,.yao { /* 并集选择器，包括任何形式的选择器（标签选择器，类选择器，id选择器，都可以是并集选择器的一部分） */ color: #0f0; /* 他们都是绿色的 */ } </style> </head> <body> <p>香蕉</p> <p>橘子</p> <div>大白菜</div> <div>辣椒</div> <h1>米饭</h1> <h1>白面</h1> <em class="yao">我也要变色</em><br> <em>我不要变色</em><br> <em>我不要变色</em><br> </body>
用来选择元素或元素的后代，其写法是吧外层的标签写在外面，内层标签写在里面，中间用空壳隔开。当标签发生嵌套是，内标签就称为了外层标签的后代。
<head> <meta charset="UTF-8"> <title>Document</title> <style> div ul li { color: red; /* 让div里面的ul里面的li为红色 */ } </style> </head> <body> <div class="nav"> <ul> <li>首页</li> <li>导航</li> <li>联系</li> </ul> </div> <ul> <li>百度</li> <li>新浪</li> <li>搜狐</li> </ul> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .item li { /* 所有的后代选择器 */ color: #f00; } .item>li { /* 子元素选择器（亲儿子） */ color: #0f0; } </style> </head> <body> <ul class="item"> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> /* 登录为红色 */ .site-r a { color: red; } /* 主导航栏里所有的连接为蓝色 */ .nav ul li a { /* 子元素选择器 */ color: skyblue; } /* 主导航栏和侧导航栏里面所有的文字都是14px,并且是微软雅黑 */ .nav,.sitenav { /* font-size: 14px; */ font: 14px "microsoft yahei"; } /* 主导航栏里面的一级菜单连接文字是绿色 */ .nav>ul>li>a { color: green; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">公司产品</a></li> <li><a href="#">联系我们</a> <ul> <li><a href="#">公司邮箱</a></li> <li><a href="#">公司电话</a></li> </ul> </li> </ul> </div> <div class="sitenav"> <div class="site-1">左侧导航栏</div> <div class="site-r"><a href="#">登录</a></div> </div> </body> </html>
<style> /* 属性选择器中用中括号来表示 */ a[title] { /* 存在属性即可 */ color: red; } input[type=text] { /* 属性的值完全等于 */ color: red; } div[class^=font] { /* 表示以font开始就好了 */ color: pink; } div[class$=footer] { /* 表示以footer结尾就行 */ color: skyblue; } div[class*=tao] { /* 表示任意位置有tao就能匹配上 */ color: green; } </style>
<body> <a href="#" title="我是一个百度">百度</a><br> <a href="#" title="我是一个新浪">新浪</a><br> <a href="#">搜狐</a><br> <a href="#">网易</a><br> <a href="#">土豆</a><br> <input type="text" value="文本框"><br> <input type="text" value="文本框"><br> <input type="text" value="文本框"><br> <input type="submit"><br> <input type="submit"><br> <input type="submit"><br> <input type="reset"><br> <input type="reset"><br> <input type="reset"><br> <div class="font12">属性选择器</div> <div class="font12">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div> <div class="sub-footer">属性选择器</div> <div class="jd-footer">属性选择器</div> <div class="new-jd-nav">属性选择器</div> <div class="new-jd-nav">属性选择器</div> <div class="tao-footer">属性选择器</div> <div class="new-tao-nav">属性选择器</div> <div class="new-tao">属性选择器</div> </body>
<style> /* .demo 类选择器 ：first-child 伪类选择器 ::first-letter 伪元素选择器 */ p::first-letter { /* 选择器中的第一个字 */ color: red; font-size: 50px; } p::first-line { /* 文本的第一行 */ color: green; } p::selection { /* 当我们选中文字的时候可以变化的样式 */ color: pink; } div::before { /* before 和 after 在盒子div的内部的前面插入或者后面插入 */ content:"俺"; } div::after { content:"18岁"; } </style>
<body> <h1>freestyle</h1> <p>英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月，因吴亦凡在国产说唱综艺《中国有嘻哈》中屡次提起freestyle而火遍网络。 2017年12月18日，“你有freestyle吗？”入选国家语言资源监测与研究中心发布的2017年度十大网络用语”。 2017年6月，吴亦凡作为中国有嘻哈制作人身份在海选70强环节对个别因紧张而表演不够充分的选手给予机会时说的抄：“有Freestyle吗？”因吴亦凡出色的外形和超高人气，一夜之间“Freestyle”爆红网络。微信搜索指数500%刷爆，一瞬间，微博、朋友圈都刮起2017最酷最炫吴亦凡的Freestyle。网友制作各种表情包：你不会Freestyle，不配和我做朋友等等。</p> <div>今年</div> </body>
div { width: 700px; height: 800px; background-color: pink; /* 背景颜色 */ background-image: url(images/L.jpg); /* 背景图片，下载下来才能生效 */ background-repeat: no-repeat; /* 是否平铺，不平铺 */ /*background-repeat: repeat-x; 水平平铺 */ /*background-repeat: repeat-y; 垂直平铺 */ } </style> </head> <body> <div> </div>
语法：
background-position: length || length 百分数
background-position: top|center|bottom|left|right;(上，中，下，左，右)
注意：
1：position 后面是x坐标和y坐标，可以使用防伪名词或者精确单位
实际工作中用的最多的是中对齐了
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 700px; height: 800px; background-color: pink; /* 背景颜色 */ background-image: url(images/L.jpg); /* 背景图片，下载下来才能生效 */ background-repeat: no-repeat; /* 是否平铺，不平铺 */ /*background-repeat: repeat-x; 水平平铺 */ /*background-repeat: repeat-y; 垂直平铺 */ /* 1：利用名词方位 */ /* background-position: left top; 默认是 左上角 */ /* background-position: right top; 右上角 */ /* background-position: bottom center; 中下*/ /* background-position: center center; 方位名词没有顺序，谁都可以在前 */ /*background-position: left ; 如果方位名词只有一个，另一个默认center */ /*background-position: 10px 10px; 2： 精确单位，第一个值一定是x值，第二个值一定是y值 */ /* 3：混搭 前面是水平 后面是垂直*/ background-position: 10px center ; } </style> </head> <body> <div> </div> </body>
语法：
backgroud-attachment: scroll | fixed
参数：
scroll:背景图片是随对象的容滚动
fixed：背景图片滚动
说明：
设置或检索背景图像是随对象内容滚动还是固定
<style> body { background-color: #000; /* 背景为黑色 */ background-image: url(images/ms.jpg); background-repeat: no-repeat; background-size: 1000px; background-position: center -25; background-attachment: fixed ; /* 默认是 srcoll 滚走的 */ } p { color: white; font-size: 30px; } </style>
backgroup:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
语法：
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围0-1 之间
注意：背景半透明是值盒子背景半透明，盒子里面的内容不收影响
同样，可以给文字边框透明，都是rgba的格式来写。
<head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #ccc url(images/L.jpg) no-repeat top center; } div { height: 400px; background: rgba(0,0,0,0.3); } </style> </head> <body> <div></div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: skyblue; } div { width: 800px; height: 800px; background: hotpink url(images/L.jpg) no-repeat ; /*background-size: 500px ; 我们尽量改一个值，防止是真扭曲 */ /*background-size: 50% ; 把图片缩放为源一般的大小 */ /* background-size: cover ; 自动调整图片的大小，保证图片始终充满背景区域，如果溢出的部分会影藏 */ background-size: contain; /* 会自动调整缩放比例，保证图片始终完整的显示在背景区域 ，图片进行等比例缩放*/ } </style> </head> <body> <div></div>
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 800px; height: 800px; background: url(images/pig.jpg) no-repeat left top, url(images/ms.jpg) no-repeat right bottom hotpink; /* 为了防止背景色将图片盖住，吧背景色放在最后一组 */ } </style> </head> <body> <div></div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #ccc; } div { color: #ccc; font:700 80px "微软雅黑"; } div:first-child { /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色； */ text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff; } div:last-child { text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> </head> <body> <div>我是凸起的文字</div> <div>我是凹下的文字</div> </body>
文本的装饰：
text-decoration 通常我们给链接修改装饰效果
| 值 | 描述 |
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义闯过文本的一条线 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #000; } a { width: 200px; height: 50px; /* background-color: orange; */ display: inline-block; text-align: center; /* 水平居中 */ line-height: 50px; /* 行高等于盒子的高度，为垂直居中 */ color:#fff; /* 设置为白色 */ font-size:22px; text-decoration: none; /* 取消下划线，文本装饰线 */ } a:hover { background: url(images/h.jpg) no-repeat ; } </style> </head> <body> <a href="#">专区说明</a> <a href="#">申请资格</a> <a href="#">兑换奖励</a> <a href="#">下载游戏</a> </body> </html>
一般情况下，出现样式冲突，则会按照css的书写顺序，以最后的样式为准
子标签会继承父标签的某些样式，如文本，字号。
并不是所有的css属性都可以继承，例如：下面的属性是不具有继承，边框，外边框，内边框，背景，定位，元素高属性
| 标签 | 0,0,0，1 |
| 类，伪类 | 0，0,1,0 |
| ID的贡献值 | 0,1,0,0, |
| 行内样式的贡献值 | 1,0,0,0 |
| 每个limportant的贡献值 | 无穷大 |
无论父标签的权重有多大，继承过来的权重总是为0.
两个权重相同时，遵循就近原则。
权重相加不进制的
吧网页元素比如 文字图片 等等，放在盒子里面，然后利用css摆放盒子的过程，就是网页布局。
边框，
边框： 边框的粗细 || 边框的风格 || 边框颜色
border: border-width border-style broder-color
边框的样式（border-style）,常用属性值如下：
none：没有边框及忽略所有边框的宽度
solid：边框为单实线，
dashed：虚线
dotted:点线
double：双实现
<head> <meta charset="UTF-8"> <title> </title> <style> div { width: 500px; height: 500px; border-width: 2px; border-color: pink; border-style: solid; } </style> </head> <body> <div>我是一个盒子</div> </body>
<head> <meta charset="UTF-8"> <title> </title> <style> input { border: 0; } .user { border-width: 1px; border-color: pink; border-style: solid; } .nc { border-top-width: 1px; border-top-color: hotpink; border-top-style: solid; border-bottom-width: 1px; border-bottom-color: hotpink; border-bottom-style: solid; } .email { border-top: 1px solid red ; /* 宽度 样式 颜色 */ border-bottom: 1px solid red; } .tel { border: 2px solid skyblue; } </style> </head> <body> 用户名：<input type="text" class="user" ><br><br> 昵 称：<input type="text" class=" nc"><br><br> 邮 箱：<input type="text" class="email"><br><br> 手 机：<input type="text" class="tel"><br><br> </body>
<style> table { width: 700px; height: 500px; border: 1px solid red ; border-collapse: collapse; /* 表示边框合并在一起 显示成细线*/ } td { border: 1px solid red } </style>
<body> <table cellspacing="0" cellspacing="0"> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> </table> </body>
语法格式：
border-radius:左上角 右上角 右下角 左下角；
<style> div { width: 200px; height: 200px; border: 1px solid red; } div:first-child { /* 连接伪类选择器 选亲兄弟 */ border-radius: 10px; /* 一个数值可以表示4个角都是相同的 10 px 的弧度 */ } div:nth-child(2) { /*border-radius:100px; 去宽度和高度的一般会变成一个园 */ border-radius:50%; } div:nth-child(3) { border-radius: 20px 60px; /* 对角线 */ } div:nth-child(4) { border-radius: 10px 40px 80px; /* 顺时针 左下角40px，好像是对角线*/ } div:nth-child(5) { border-radius: 10px 40px 80px 100px; /* 顺时针 */ } div:nth-child(6) { border-radius: 100px;/* 去宽度和高度的一般 */ height: 100px; /* 高度放低会变成一个椭圆 */ } div:nth-child(7) { border-radius: 100px 0; } </style>
padding属性设置内边距
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; border: 1px solid red; /* padding-left: 20px; 做内边距 padding-top: 30px; 上内边距*/ /*padding: 20px; 写一个值表示上下左右都是20像素 */ /*padding: 10px 20px; 上下10 左右20 */ padding: 10px 20px 30px 40px; /* 顺时针 上右下左 */ } </style> </head> <body> <div>盒子的内边距就是内容和边框的距离</div> </body>
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> nav { height: 41px; background-color: #FCFCFC; border-top: 3px solid #FF8500; border-bottom: 1px solid #EDEEF0; } nav a { font-size: 14px; color: #4c4c4c; text-decoration: none; /* 取消下滑县 */ padding: 0 15px; /* 上下是0 左右是15 */ height: 41px; line-height: 41px; display:inline-block; } nav a:hover { background-color: #eee; } </style> </head> <body> <nav> <a href="#">首页</a> <a href="#">手机新浪网</a> <a href="#">网站导航</a> <a href="#">三个字</a> </nav> </body> </html>
margin属性用于设置外边距，
<style> div { width: 200px; height: 200px; background-color: pink; /* margin-top: 100px; 上右边距 margin-left: 50px; 左右边距 */ margin: 30px auto; /* 上下30，左右auto，这样可以是块及带有宽度的盒子水平居中 */ padding: 4px; /* 内边距4像素 */ } </style>
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; height: 100px; border: 1px solid pink; text-align: center; /* 文字水平居中 */ margin: 10px auto; /* 盒子水平居中 */ } section { width: 400px; height: 400px; border: 1px solid #000; background: blue url(images/ms.jpg) no-repeat; background-position: 30px 50px; /* 更改图片的位置 */ background-size: 400px 400px ; /* 更改图片的大小 */ } section img { width: 200px; height: 210px; margin-top: 30px; /* 插入图片可用 margin 或padding */ margin-left: 50px; /* 插入的图片是一个盒子 */ /* 3:一般情况下，背景图片适合做一些小图标; 产品之类的就使用插图图片 */ } </style> </head> <body> 1:文字水平居中和盒子水平居中 <div>文字水平居中</div> 2：插入图片和背景图片 <section> <img src="images/L.jpg" alt=""> </section> </body>
为了是各个浏览器中网页的兼容性，可以清楚元素的内外边距
* {
passing: 0; 清楚内边距
margin: 0; 清楚外边距
}
<head> <meta charset="UTF-8"> <title>Document</title> <style> span { background-color: pink; margin: 80px 50px; /* 上下30 左右50 */ /* 行内元素是只有左右边距 没有上下边距 */ } </style> </head> <body> <span>我是行内元素</span> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } div:first-child { margin-bottom: 100px; } div:last-child { background-color: purple; margin-top: 50px; } /* 外边距合并 垂直的块及盒子 以最大的外边距为准 解决办法，值设置一个值就可以了。 */ </style> </head> <body> <div></div> <div></div> </body>
嵌套块元素垂直外边距的合并
父元素没有上内边距及边框，则父元素的上外边距与子元素的上外边距发生合并
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 300px; height: 300px; background-color: pink; margin-top: 100px; /* 当两个盒子嵌套的时候回发生重合 */ /* border: 1px solid red; 解决办法1：给父元素定义1像素的上边框 */ /* padding-top: 1px ; 解决办法二：给父元素定义1像素的内边框 */ overflow: hidden; /* 解决方案三 */ } .son { width: 200px; height: 200px; background-color: purple; margin-top: 30px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body>
空间尺寸=width+border+padding+margin
实际尺寸= width+border+padding
如果一个盒子没有指定宽度/高度或者继承父亲的宽度/高度，则padding不会影响盒子的大小
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 30px; border: 1px solid red ; padding-top: 10px; padding-left: 20px; /* #因为盒子没有宽度，所以padding不会影响盒子宽度 */ } nav { width: 300px; height: 40px; border: 1px solid pink; } p { /* p没有指定宽度，则默认和父亲元素一样宽， */ height: 20px; background-color: hotpink; padding-left: 30px; /* 此时padding也不会影响盒子的宽度 */ } </style> </head> <body> <div>奔跑吧，兄弟</div> <nav> <p>摔跤吧，爸爸</p> </nav> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; /* 取消列表自带的小点 */ } .searchPic { /* 大盒子 */ width: 238px; height: 294px; border: 1px solid #D9E0EE; border-top: 3px solid #FF8400; margin:100px; } .searchPic h3 { height: 35px; line-height: 35px; border-bottom: 1px solid #D9E0EE; font-size: 16px; font-weight: normal; /* background-color: #ccc; */ padding-left: 12px; /* 这个没有宽度，继承了父亲的宽度 */ } .searchPic img { margin: 7px 0 0 8px; } .searchPic ul li a { font-size: 12px; color: #666; text-decoration: none; /* 取消下划线 */ } .searchPic ul { margin-left: 8px; } .searchPic ul li { padding-left: 10px; height: 26px; line-height: 26px; background: url(images/h.jpg) left center no-repeat; background-size: 5px 5px; } .searchPic ul li a:hover { text-decoration: underline; /* 添加下划线 */ color: #ff8400; } </style> </head> <body> <div class="searchPic"> <h3>搜索趣图</h3> <img src="images/happy.jpg" height="160" alt=""> <ul> <li><a href="#">小胖墩有用被卡，被救后一脸无辜</a></li> <li><a href="#">小胖墩有用被卡，被救后一脸无辜</a></li> <li><a href="#">小胖墩有用被卡，被救后一脸无辜</a></li> </ul> </div> </body> </html>
稳定性：
width > padding > margin
原因：
盒模型有两种：
<head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { font-size: 100px; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7); } div { width: 200px; height: 200px; border: 10px solid red; /* box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影 */ box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.5); } </style> </head> <body> <h1>稳住。我们能赢</h1> <div></div> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 240px; height: 240px; line-height: 240px; background-color: pink; margin: 100px; background: url(images/shui.jpg) no-repeat; font-size: 30px; text-align: center; color: rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 5px 5px 10px 16px rgba(255, 255, 255, 0.8) inset; } </style> </head> <body> <div>水晶图片</div> </body> </html>
标签：消息 文件 中文字符 简写 str ant 左右 相对 摔跤吧
原文地址：https://www.cnblogs.com/1164xiepei-qi/p/11183927.html
