热门搜索:
您现在的位置是：首页 > 文章详情

Python全栈 Web（边框、盒模型、背景）

日期：2018-09-03点击：485
CSS常用的属性：
width
height
color
background-color
font-size
font-weight
text-decoration
vertical-align
尺寸单位和颜色：
px
%
red
rgb(255, 0, 0)
reba(255, 0, 0, 0.5)
#ff0000
#f00



尺寸 和 边框：
尺寸属性：
width、height
用来改变元素的宽高大小
取值：px为单位的数字 或 %
快元素和行内快元素都可以设置宽高大小
行内元素不起作用，大小有内容自适应
溢出处理：
溢出属性：overflow
取值：visible（默认可见）
hidden   隐藏  溢出部分不可见
scroll   显示滚动条  溢出时可用 始终显示
auto     自动当发生溢出的时 产生滚动条并可用

边框：
边框的实现：
1.简写设置
通过一个属性为4个方向设置边框
可以设置边框的宽度、样式、颜色
属性：border
取值：width style color（缺一不可）
width：宽度 px
style：边框样式
取值：
solid：实线
dashed：虚线
dotted：点线
double：双线
color：设置边框颜色
特殊用法：
取消边框：border：none；
2.单独设置某个方向的边框
属性：
border-top      上
border-right 右
border-bottom 下
border-left 左
取值：width style color（缺一不可）
3.单独定义边框的宽度、样式、颜色（了解）
border-width：
border-style：
border-color：
4.边框实现三角标
元素的宽高尺寸为0
元素分别设置四个方向相同宽度
指定方向可以见 剩余的设置为不可见 透明（transparent）
想要设置三角标必须设置4个方向的边框 否则就是矩形
轮廓线：
围绕在元素边框周围的线  常见于表单元素 如：输入框焦点线
属性：outline
取值：width style color
一般多取消元素的默认轮廓线
outline：none
圆角边框：
设置元素的圆角
属性：border-radius
取值：px、%（参照元素尺寸）
取值情况：
border-radius：20px;
一个值表示4个圆角程度都是20px
两个值表示 1和3 2和4 对角相等
三个值表示最后一个角和对角相等
四个值表示分别表示4个圆角程度
圆形：取一个值：%50；
边框阴影(盒阴影)：
属性：
box-shadow
取值：
offset-x  水平偏移
offset-y 垂直偏移
blur 阴影的模糊度 值越大越模糊
spread 阴影的 延伸距离
color 阴影颜色
浏览器坐标系：
不管是窗口还是元素都以左上角为原点 作为x,y轴的正方向
盒模型/框模型：
一切元素皆为框
定义在文档中实际占据的尺寸
包含内容：
外边距、边框、内边距、元素尺寸
默认情况下元素最终占据的尺寸大小：
最终宽度 = 左右的外边距 + 左右边框的宽度 + 左右内边距 + 元素宽度
最终高度 = 上下的外边距 + 上下边框的高度 + 上下内边距 + 元素高度


1.外边距：
元素边框与其他元素边框之间的距离
设置元素与元素之间的距离
属性：
margin
取值：px、%
取值情况：
margin：10px；
一个值表示四个方向都设置外边距
两个值表示上下，左右的外边距相等
三个值表示左右相等其他不等
四个值表示分别设置上右下左的外边距
特殊用法：
1.清除元素的外边距
margin：0px；
2.设置元素在父元素中水平居中
margin：0px auto；
3.取值可以是负值
如果给负值表示位置微调
四个方向的外边距单独设置：
属性：
margin-top
margin-right
margin-bottom
margin-left
可以是一个值也可以是百分比
具有默认外边距的元素：



2.内边距：
元素的内容与元素边框的距离
属性：padding
取值：px、%
取值情况：
padding：10px；
一个值表示四个方向的内边距
两个值表示上下，左右相等
三个值表示左右相等 其他不等
四个值表示分别设置四个方向的内边距
四个方向的内边距单独设置：
padding-top
padding-right
padding-bottom
padding-left
具有默认内边距的元素：
ol ul 文本框 密码框 按钮 td

box-sizing：
指定盒模型的计算方式
属性：box-sizing
取值：
content-box  默认值
border-box：
元素的width height属性  设置包含边框 内边距和内容部分共同的尺寸

元素显示设置：
属性；display
作用；改变元素类型
取值：
block  转换为块元素（可以设置隐藏显示）
inline 转换为行内块元素
inline-block 转换为行内块元素
none 设置元素隐藏
背景相关的属性：
背景颜色是从边框位置开始绘制的
如果元素加内边距，也会按照背景颜色进行补充
所有的元素默认颜色都为透明 新建窗口为白色不是body的颜色 而是浏览器渲染的效果
属性：
background-color

背景图片的设置：
属性；background-image
取值 url(图片地址)
图片平铺显示：
如果背景图片小于元素尺寸，会自动对图片重复平铺
属性：
background-repeat
取值：
repeat（默认） 水平和垂直方向平铺
no-repeat 不重复平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
图片尺寸：
属性：background-size
取值：
px
%：
采用当前元素的尺寸获取包含width height两个值
cover：
将图片等比拉伸至完全覆盖元素 超出部分裁剪掉
contain：
将图片等比拉伸至刚好被元素容纳 图片比例不变
图片的位置：
默认情况下 背景图片重从元素的左上角显示
属性：
background-position
取值：x y
以像素为单位的数值没使用空格隔开
x 水平偏移距离（正负数都可以）
y 垂直偏移距离（正负数都可以）

x% y%：
百分比参照元素尺寸获取
0% 0%：
图片左上角显示
100% 100%：
背景图片右下角显示
50% 50%：
背景图片中间显示
使用方位值表示：
x y
x：left center right
y：top  center bottom
如果要一个方向
背景属性简写：
属性：background
取值：
color url() repeat position
背景图片的大小需要单独设置




原文链接：https://yq.aliyun.com/articles/634926
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章