本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
width和height是指content内容的宽高 当width的值小于min-width时，则宽度为min-width 当width的值大于max-width时，则宽度为max-width min-width和max-width存在兼容性问题，在IE6以下不支持
哪些元素可以设置宽高属性 块级元素
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>、<dl> 、<dt> 、<dd>等 替换元素
<img>、<input>、<textarea>等 如果图片既通过width来设置宽度，又通过css样式来设置宽度，最终宽度为css样式中设置的宽度
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*实际尺寸为200px*/
img{width:200px;}
</style>
</head>
<body>
<img src="cat.jpg" alt="cat" width="100px">
</body>
</html>
border-style的值 none 定义无边框。默认值
hidden 与 “none” 相同。除非在表格元素中解决边框冲突时
dotted 定义点状边框。在大多数浏览器中呈现为实线
dashed 定义虚线。在大多数浏览器中呈现为实线
solid 定义实线
double 定义双线
groove 定义 3D 凹槽边框
ridge 定义 3D 垄状边框
inset 定义 3D inset 边框
outset 定义 3D outset 边框
inherit 规定应该从父元素继承边框样式 border可以四个边分开设置 border-left border-right border-top border-bottom [HTML] 纯文本查看 复制代码 <style>
p{width:200px;height:100px;border-top:1px solid blue;}
</style
padding缩写： padding : 值1； //4个方向都为值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值4
标准盒子模型 宽度=内容宽度 高度=内容高度 盒子在页面中所占的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距 盒子在页面中所占的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距 盒子的实际宽度是：左边框+左内边距+内容宽度+右内边距+右边框 盒子的实际高度是：上边框+上填充+内容高度+下填充+下边框 IE盒子模型 宽度=左边框+左填充+内容宽度+右填充+右边框 高度=上边框+上填充+内容高度+下填充+下边框 盒子在页面中所占的宽度=左边距+宽度+右边距 盒子在页面中所占的高度=上边距+高度+下边距 如果有DOCTYPE文档声明，则所有浏览器会统一按照标准盒子模型来解析
display:inline; 内联，前后没有换行符 行内元素无法设置宽和高，外边距只能设置左右的，无法设置上下的 display:block; 块，前后带有换行符 内联元素之间有缝隙，是因为存在换行
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{border:1px solid;}
</style>
</head>
<body>
<span>内联元素1</span>
<span>内联元素2</span>
<span>内联元素3</span>
</body>
</html>
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{border:1px solid;}
</style>
</head>
<body>
<span>内联元素1</span><span>内联元素2</span><span>内联元素3</span>
</body>
</html>
解决方法二：在外层加div，设置字体为0，给子元素单独设置字体
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{font-size:0px;}
span{border:1px solid;font-size:16px;}
</style>
</head>
<body>
<div>
<span>内联元素1</span>
<span>内联元素2</span>
<span>内联元素3</span>
</div>
</body>
</html>
display:none 不显示
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{color:#000;text-decoration: none;}
span{display: none;;}
a:hover span{display: inline-block;}
</style>
</head>
<body>
<a href="#">指我……<span>和你捉迷藏</span></a>
</body>
</html>
| 
发表于 2020-3-27 20:00:03
