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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calmound

CSS选择器

CSS样式     1.内联式CSS样式表:把CSS代码直接写在现有HTML标签中          (1)<p style="color:red">这里是红色...

30250
来自专栏练小习的专栏

可视化格式模型-IFC

行内格式化上下文(inline formatting contexts) 什么是行框 相对于块格式化上下文,在行内格式化上下文中,框(boxes)一个接一个地...

218100
来自专栏我和我大前端的故事

哪些你知道或不知道的css,在这里或许都齐全 css编码技巧 css小技巧

暑假实习的时候带我的师傅,告诉我要注重基础,底层实现原理。才能在日新月异的技术行业站住脚跟,以不变应万变,万丈高楼平地起,所以我们应该不断的去学习,去交流。交流...

15210
来自专栏自动化测试实战

flask第35篇——模板项目实战(一)

上面代码综合了之前学过的知识,包括:flask for 循环、set模板赋值其余都是前端的内容,这里不做过多的阐述。

14440
来自专栏james大数据架构

不懂CSS的后端难道就不是好程序猿?

  由于H5在移动端的发展如日中天,现在大部分公司对高级前端需求也是到处挖墙角,前端薪资也随之水涨船高,那公司没有配备专用的前端怎么办呢?   作为老板眼中的“...

22790
来自专栏web编程技术分享

第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩

43870
来自专栏向治洪

Flexbox布局指南

Flexbox布局概念 Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来...

20970
来自专栏jojo的技术小屋

原 荐 CSS深入理解之border

22520
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text

50840
来自专栏coding for love

CSS入门7-三大特性之继承特性

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

10820

扫码关注云+社区

领取腾讯云代金券