divphulolli像h，p这种块级的标签，里面一般都是放文字
往他们里面放块级标签就会问题,比如往p标签里面放置div， 产生的结果如下
<p></p> <div> </div><p></p>
aspanstrongbemidelsins行内块元素a标签里面不能再放a标签
a里面可以放块级元素，比如一张图片
input imgtd像上面的input，img，td等标签的可以设置宽高，我们称其为行内块元素
默认的宽高就是标签里面内容的宽高，但是我们也可以通过CSS控制他们可以和相邻的行内元素在一行上，但是彼此之间会通过空格间隔开高度，宽度，内边距，外边距都可以通过CSS控制可以把行内块元素看作是文本标签的显示模式相互转换x{ display:inline display:block display:inline-block}<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> nav{ text-align: center; } a{ Font-size: 20px; color: #333333; /*行高等于盒子高，可以让文本上下居中*/ line-height: 50px; text-decoration:none; text-align:center; background-color: pink; wIDth: 150px; height: 50px; display: inline-block; } a:hover{ background-color:aqua; }s </style></head><body><nav ID="nav"> <a href="#">导航栏</a> <a href="#">导航栏</a> <a href="#">导航栏</a> <a href="#">导航栏</a> <a href="#">导航栏</a> <a href="#">导航栏</a></nav></body></HTML>基线和基线之间的距离我们成为行高。
比如红色线圈出来的距离就是行高
如何让一行字在盒子中垂直居中？
做法是： 让行高 = 盒子高,例如下
div{ line-height: 10px; height: 10px}像下面这样，最终a标签中文字的大小是30px，颜色是aqua。 原因如下：
多个CSS样式都修饰同一个标签，那么距离标签距离近的CSS样式生效层叠时仅仅会层叠掉冲突的样式。<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> a { color: #000; Font-size: 30px; } a { color: aqua; } </style></head><body><nav ID="nav"> <a href="#">导航栏</a> <a href="#">导航栏</a></nav></body></HTML>下面的示例效果是：span标签中的元素被修饰成水蓝色， 这就是发生的CSS的继承性，span的CSS样式继承了nav的CSS样式
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> nav { color: aqua; } </style></head><body><nav ID="nav"> <span>this is span</span></nav></body></HTML>| 方式 | 贡献值 |
|---|---|
| 继承或者是* | 0000 |
| 元素标签 | 0001 |
| 类，伪类 | 0010 |
| ID | 0100 |
| 行内样式 | 1000 |
| ！important | 无穷大 |
了解了这个贡献值之后，结合贡献值和继承性看下CSS生效的法则
span作为标签选择器，他的贡献值是0001
nav span这种子选择器，span会继承到nav的贡献值0001，加上自己的0001，累计得到0002 ， 所以颜色最终是 水蓝色
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> span { color: red; } nav span{ color: aqua; } </style></head><body><nav ID="nav"> <span>this is span</span></nav></body></HTML>可以像下面这样为HTML添加背景图片,但是这种样式会导致，如果图片不够大，就会有n张图片去平铺在HTML上，很丑。
body { background-image: url(1.jpg);}控制图片是否平铺，以及在哪个方向上平铺
body { background-image: url(https://www.jb51.cc/res/2020/12-12/21/571664e71899566318514d678929c0f8.png); background-repeat: repeat;/*默认值，在横向和纵向上都会产生平铺效果*/ background-repeat: no-repeat;/*无论图片多大，都不会产生平铺*/ background-repeat: repeat-x;/*横向上平铺*/ background-repeat: repeat-y;/*纵向上平铺*/}控制图片在盒子中的位置：
background-position: x y;其中的x y 可以是方位词，如 center，left， right，top，bottom也可以是 像素值示例：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> div { height: 600px; wIDth: 600px; background-color: aqua; background-image: url(1.jpg); background-repeat: no-repeat; background-position: center center; } </style></head><body> <div> </div></body></HTML>效果：
设置背景图是否跟着滚动条的滚动而滚动
bady{ background-image: url(https://www.jb51.cc/res/2020/12-12/21/571664e71899566318514d678929c0f8.png); /*不会随着滚动条的滚动而发生变化，默认值是scroll,会随着滚动条的滚动而滚走*/ background-attachment: fixed; }实现给a标签添加一张背景图片，添加的背景图片默认的属性是： 不平铺，靠左上角对齐，我们要实现的效果就是当鼠标经过a标签时，让图片往上移动，按左下角对齐。来实现动画的效果
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> a { height: 208.5px; wIDth: 500px; display: block; background-image: url(./1.jpg); } a:hover { background-position: left bottom; } </style></head><body><a href="#"></a></body></HTML>主要使用的是下面的background：rgba（）
r： red
g：green
b：blue
000是纯黑色 fff是纯白色
a：Alpha 透明度。 取值范围是0~1
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> body { background-color: pink; } div { height: 200px; wIDth: 200px; background: rgba(0,0.3); } </style></head><body> <div> this is div </div></body></HTML>通过下面的CSS可以为盒子添加上边框
div { wIDth: 200px; height: 200px; border: solID;}通过border可以为盒子设置边框，有如下的选项solID： 实线none： 默认值，没有边框dashed：边框是虚线dotted：边框为点线double：边框为双实线还可以单独为某一个边设置边框border-leftborder-rightborder-topborder-bottom比如：border-left: 1px solID red;一个表格，默认是会长成下面这样
table{ wIDth: 300px; height: 300px; border: 1px solID;}td { border: 1px solID; text-align: center;}table,td { border-collapse: collapse;}如果盒子中有内容的话，默认的会贴着左上角对齐，如果这时如果我们想改变盒子中的内容在盒子中的位置，可以通过设置盒子的内边距来实现。
盒子的内边距增大后（盒子变厚），盒子中的内容就会被内边距挤动。
div { /*设置上下左右均为10px*/ padding: 10px;}div { /*设置上下10px，左右20px*/ padding: 10px 20px;}div { /*设置上10px，左右15px ，下20px*/ padding: 10px 15px 20px;}div { /*设置上10px，左15px ，右30px，下20px*/ padding: 10px 15px 30px 20px;}当我们为盒子设置padding时，附带的影响就是padding会将盒子撑开
解决的方式：我们添加了多少的padding，对着应必须从wIDth和height中将其减下去。
清除所有的内外边距默认的body标签会有一个外边距，通过下面的方式可以清除这个外边距，让页面中的元素紧贴在浏览器边框上，显得更加美观。
* { margin: 0; padding: 0;}<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } body { background-color: #eee; } .article { wIDth: 378px; height: 263px; border: 1px solID #ccc; margin: 100px; padding:20px 16px 0; } .article h4 { color: #202026; Font-size: 21px; border-bottom: 1px solID; padding-bottom: 2px; } .article ul { margin-top: 12px; } .article li { height: 28px; line-height: 28px; List-style:none; padding: 5px 20px; border-bottom: 1px dashed #cccccc; } .article li a{ text-decoration: none; Font-size: 16px; color: #333; } .article li a:hover{ text-decoration: underline; } </style></head><body><div > <div > <h4 >最新新闻/New Article</h4> <ul> <li><a href="#">做一个有上进心的青年。</a></li> <li><a href="#">做一个有上进心的青年。</a></li> <li><a href="#">做一个有上进心的青年。</a></li> <li><a href="#">做一个有上进心的青年。</a></li> </ul> </div></div></body></HTML>让盒子中的内容居中对齐
前面说text-aligin样式
div{ /*他可以让div中的 文字，行内元素，行内块元素水平居中对齐*/ text-align: center}div { /*上下0，左右自适应*/ margin: 0 auto;}/*或者是这种写法*/div { margin: auto;}如下图，假设上盒子的下边距是20px，下盒子的上边距是10px， 理论上，上下盒子之间的间距应该是30px，但是浏览器会自动将将盒子之间的间距合并，以大值为准。而不是相加。
这个问题其实是可以直接避免的，比如我们想让两个盒子直接的间距保持在30px，我们直接给上盒子的下边距设置为30px， 或者是将下盒子的上边距离设置成30px就ok。
padding不会撑开盒子的情况如果一个盒子给定了wIDth，那么我们再设置padding时，就会将盒子撑开，想让盒子保持原来的状态，我们就得再宽高上减去盒子的padding值
但是，下面这种情况下，padding不会撑开盒子,原因是son并没有指定宽度，他的只会撑满父盒子。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> .father { wIDth:200px; height: 150px; background-color: pink; } .son { padding: 20px; } </style></head><body><div > <div > <div >123</div> </div></div></body></HTML>div { wIDth: 20px; height: 20px; border-radius: 50%;}圆角练习
<!DOCTYPE HTML> <HTML lang="en"> <head> <Meta charset="UTF-8"> <Title>Title</Title> <style> body { background-color: #eee; } .dv { text-align: center; } a { wIDth: 200px; height: 200px; display: inline-block; color: #f40; Font-weight: 700; Font-size: 18px; border-radius: 50%; text-decoration: none; background-color: #fff; line-height: 200px; margin: 30px; } a:hover { background-color: #ff4400; color: #ffffff; } </style> </head> <body> <div > <div > <a href="#">点我升级</a> <a href="#">点我升级</a> <a href="#">点我升级</a> <a href="#">点我升级</a> </div> </div> </body> </HTML>语法格式：
Box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影水平阴影： h-shadow 必须垂直阴影: v-shadow 必须模糊距离: blur 可选阴影尺寸: spread 可选 阴影颜色: color 可选内/外阴影： inset 可选例：div { Box-shadow: 0 15px 30px rgba(0,0.4) }以上是内存溢出为你收集整理的Html 基础 二全部内容，希望文章能够帮你解决Html 基础 二所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）