html+css学习笔记002-盒子模型
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
学习前端，乃至引申到学习任何程序语言
怕的不是我们不懂英文 怕的不是我们不懂操作电脑 怕的更不是我们不懂基础程序语言
而是我们没有坚持不懈，直到成功的心
做任何事情都是一样
不管我们开始有多么的用心，多么的努力，当我们懈怠了
一次，两次，三次......
从入门到精通，还是从入门到放弃
一念天堂，一念地狱
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
div{
width:100px; /* 宽 */
height:100px; /* 高 */
background:green; /* 背景 */
background颜色值：
red 英文单词
#FFFFFF 十六进制颜色值（0~F）
rgb(r,g,b) 红绿蓝颜色数值（0~255）
rgba(r,g,b,a) 红绿蓝透明数值（透明数值0~1）
border:1px solid red; /* 边框：大小 类型 颜色 */
border-top /* 上边框 */
border-right /* 右边框 */
border-bottom /* 下边框 */
border-left /* 左边框 */
border-width /* 边框大小 */
border-style /* 边框类型：solid直线 dashed虚线 dotted点线 */
border-color /* 边框颜色 */
border:none; /* 不要边框 */
border-radius:10px 9px 8px 7px; /* 圆角属性：左上 右上 右下 左下（四个值时） */
border-radius:10px 9px 8px; /* 左上 右上左下 右下（三个值） */
border-radius:10px 9px; /* 左上右下 右上左下（两个值） */
border-top-left-radius; /* 左上 */
border-top-right-radius; /* 右上 */
border-bottom-right-radius; /* 右下 */
border-bottom-left-radius; /* 左下 */
padding:10px 9px 8px 7px; /* 内边距：上 右 下 左（四个值时） */
padding:10px 9px 8px; /* 上 左右 下（三个值时） */
padding:10px 9px; /* 上下 左右（两个值时） */
margin:10px 9px 8px 7px; /* 外边距：上 右 下 左 */
margin:10px auto; /* 外边距：auto（自动）盒子水平居中 */
box-shadow:10px 10px 10px 10px red inset; /* 盒子阴影：x轴偏移 y轴偏移 模糊半径 阴影大小 阴影颜色 内阴影 */
盒子大小计算公式：
div宽高=上下padding+上下border+内容content+左右padding+左右border
}
/* 外边距合并 解决思路：不要让垂直外边距合并
(padding / border) */
盒子模型补充知识：
div{
width:100px;
height:100px;
padding:10px;
border:1px solid #CCC;
box-sizing:border-box; /* 怪异盒模型：盒子宽高不随边框和内边距增加而增加，有兼容性问题 */
}
ul{
minwidth:200px;
maxwidth:300px;
}
li{
width:calc(100% - 10px * 2 ); /* 解决并排盒子因父级宽度不够掉下去的问题 */
}
div{
resize:none; /* 盒子大小拖动 */
none 不允许拖动
both 水平和垂直方向都可以拖动
vertical 垂直方向可以拖动
horizontal 水平方向可以拖动
overflow:auto; /* 必须设置值 */
}
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div> </div> <!-- 块标签-->
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读