PythonWeb第三天
PythonWeb# 前端简单介绍
-day03
文章目录
- PythonWeb# 前端简单介绍
- 1.标签分类
- 1.块元素
- 2.行内元素
- 3.块内块元素
- 2.标签分类及嵌套
- 1.标签分类
- 2.标签嵌套
- 3.尺寸及颜色表示
- 1.尺寸单位:
- 2.颜色表示
- 3.盒模型(框模型)
- 1.元素的组成
- 2.内容框设置
- 3.边框设置
- 4.内边距设置
- 5.外边距设置
- 6.元素在文档中实际尺寸的计算
1.标签分类
1.块元素
- 独占一行,不允许共行显示;div ul 表格 表单
- 可以手动设置宽高(默认情况下宽度与父元素保持一致)(div,h1-h6,p,ul,ool,table,form,body)
2.行内元素
- 允许共行显示,但是不能手动调整宽高,尺寸由内容决定(a,b,strong,label,span)
3.块内块元素
- 既能共行显示,又可以设置宽高(img input button)
2.标签分类及嵌套
1.标签分类
2.标签嵌套
- 1.块元素中可以嵌套任意类型的元素
- 注意:P标签中只能嵌套行内或行内块元素
- 2.行内元素中尽量只嵌套行内或行内快
3.尺寸及颜色表示
1.尺寸单位:
- px默认单位 指定像素值
- %:百分比,参照父元素对应属性值进行计算
- em:相对单位,表示字体大小,参照父元素的字体大小进行计算,默认1em=16px
- rem:参照根元素的字体大小计算
2.颜色表示
- 1.英文单词
- 2.rgb(r,g,b)使用三原色去设置颜色,每个颜色取值0~255,值越大越饱和
- 3.rgba(r,g,b,alpha)使用三原色设置,并且可以设置透明度,alpha取值0(透明)~1(不透明),取小数设置半透明
- 4.十六进制表示颜色
- 十六进制以#为前缀,每两组为一组代表一种三原色.三原色取值0255,转换十六进制00ff,十六进制中每位字符的取值范围:0-9,a-f 特殊值#000000 黑 #FFFFFF白色
*短十六进制:由三位组成,代表三原色,浏览器会自动对每个进行重复,补全6位十六进制 - #000->#000000
- #fff->#ffffff
- #0f0->#00ff00
3.盒模型(框模型)
1.元素的组成
- 元素是由各种框组成的(内容框,边框,边距)为元素设置尺寸,
边框和边距,会影响元素在文档中的实际尺寸,影响布局
2.内容框设置
- 大部分元素在设置width/height时,指定的就是内容框的大小
- 内容溢出:元素的内容超出元素设置的尺寸,可以使用overflow处理溢出,
overflow: visible(默认wei值.溢出可见)wei
hidden(隐藏)wei
scroll(强制在水平和垂直方向添加滚动条)
auto(自动在发生溢出的方向添加可用的滚动条)
3.边框设置
- 1.边框设置:
border:width style color;边框样式(border-style)可取:solid 实线dotted 点线dashed 虚线double 双线
- 2.单边框设置
border-top
border-bottom
border-left
border-right
- 取值:width style color;
- 网页三角形制作
- 1.设置宽高为0
- 2.统一设置四个方向透明边框
- 3.调整某个方向边框可见
特殊:行内元素拼接三角标时,默认不能手动调宽高.自带高度
(由字体大小决定),可以设置font-size:0;去掉默认高度;或者转换元素类型,转换成块元素设置尺寸为0. - 转换元素类型:
属性display
取值: - bolck(块元素)
- inline(行内元素)
- inline-block(行内块元素)
- none(元素隐藏)
- 轮廓线
-
轮廓线在文档中不占位,边框是实际占位的
outline:width style color;
常用:
/取消文本框焦点状态下的轮廓线/
outline;none;
- 5.圆角
属性:border-radius 设置圆角半径
取值:像素值/百分比
使用:常用像素值设置四个角的圆角效果;
使用50%调整元素的显示效果(正圆或者椭圆)- 6.盒阴影
属性:box-shadow
取值:offsetX offsetY blur (spread) color;
网页坐标系:一律以左上角为原点,向右向下分别为X轴和Y轴的正方向
属性值:
offsetX /offsetY:设置阴影的偏移距离
blur:设置阴影的模糊程度,取像素值,越大越模糊
spread:选填,设置阴影的延伸距离
color:设置阴影颜色,默认为黑色
4.内边距设置
- 设置内容框与边框之间的距离
属性:
5.外边距设置
- 设置元素与元素之间的距离
- 属性:margin
- 取值:像素值,取值规律同padding
- 特殊取值:
1.设置左右自动外边距(auto),实现元素在父元素范围内的水平居中
2. 取负值,元素位置的微调margin-leftmargin-rightmargin-topmargin-buttom
3.外边距合并:1.垂直方向1).第一子元素设置的margin-top,作用于父元素上,可以为父元素设置顶部边框或者添加padding-top:0.1px;2).同时为元素设置上下边距,元素之间最终选用最大的边距值2.水平方向1)行内元素对盒模块型属性部分支持,不支持width/height设置,不支持上下边距2)水平方向上外边距会叠加显示具有默认外边距的元素(body,h1,h2,h4,h5,h6,p,ul,ol{margin:0;padding:0;/*取消列表的项目符号*/list-style:none;})
6.元素在文档中实际尺寸的计算
- 属性:box-sizing
- 取值:
- content-box 为元素设置的width/height指定的是内 容框的大小
计算尺寸:各个属性值累加计算
width/height+border+padding+margin
- border-box 为元素设置的width/height指定的是包含边 框在内区域的大小
计算尺寸:width/height+margin
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！