Python学习笔记-前端-CSS(二)

weer-wmq

已于 2023-09-17 15:58:02 修改

阅读量84

点赞数

分类专栏： Python前端文章标签：前端 css 学习

于 2022-05-14 11:53:23 首次发布

本文链接：https://blog.csdn.net/ITlearner007/article/details/124730891

版权

Python前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本属性

字体属性

font-size：字体大小
font-family：字体格式，如Times New Roman
font-weight：bolder为加粗，lighter为细字体，inherit为继承父标签字体粗细
color：字体颜色，有四种书写方法
1. 颜色英文，如red，blue
2. 颜色编号，如#4e4e4e,#eeeeee等
3. rgb(0,0,0) 三基色，数字范围为0~255
4. rgba(0,0,0,0.5) 第四个数字为透明度，范围0~1

透明度

与rgba()不同，opacity同时改变字体和颜色的透明度
如opacity:0.5;

文字属性

text-align：center表示居中，right右对齐，left左对齐，justify两端对齐
text-indent：用于缩近(设置为字体font-size的两倍—指缩近两格)
text-decoration：overline顶头线，underline下划线，line-through删除线，none表示无格式(用来去除a标签的下划线)

边框

border-width：边框厚度，单位px
border-style：边框样式，solid为实现，dotted为圆点，dashed为虚线
border-color：边框颜色

以上三个支持简写：border:3px dashed blue;
也可单独对上下左右加边框，如border-top：2px solid red；
border-radius:50%;——画圆(在height=width是为圆，不等时为椭圆)

display属性

display：none；隐藏标签内容且占用位置也没了
display：inline；将标签转为行内标签的特点
display：block；将标签转为块级标签的特点
display：inline-block；同时具有块级和行内标签的特点常用来写一行多个标签内容

盒子模型

可以将前端页面看成是装有物品的盒子，盒子与盒子之间有距离(margin)，盒子本身有厚度(border)，盒子里的物品距离盒子有距离(padding)，物品有内容(content)

盒子模型

margin：标签与标签之间的距离(可以通过margin-top，margin-bottom，margin-left，margin-right单独设置标签之间上下左右之间的距离)
有以下书写方式：
1. margin：0；表示上下左右都是0px；
2. margin：10px 20px；上下为10 左右为20
3. margin：10px 20px 30px；上为10 左右为20 下为30
4. margin：10px 20px 30px 40px；上为10 右为20 下为30 左为40(顺时针转)
5. margin：0 auto；上下距为0 左右自动居中
ps: body在每个浏览器都自带margin值，应提前设置为零
padding(同样有上下左右之分)：表示标签内部内容到标签的距离
！书写规律同margin一样

盒子阴影

类似给边框加上阴影显示。格式为：如box-shadow：5px 5px 5px rgba(0,0,0,0.8);

浮动

设置标签浮在页面之上脱离页面，脱离了文档流
如float:right;/float:left;
但会造成父标签塌陷的问题：即已被子标签撑起的父标签，在子标签浮动出页面之后脱离了父标签的怀抱，父标签中就没有内容充起，就会蔫儿了

解决浮动的影响

另加内容充起父标签
clear属性如clear:left;消除左边的浮动

通用公式：

.clearfix {
content:'';
display:block;
clear:both;
}
/*只要哪个标签需要清除浮动的影响，就给它的类属性加一个clearfix值(class='clearfix')*/

溢出

当标签的内容大于标签的大小时就会造成内容溢出到标签外的现象
默认是溢出内容可见的即overflow:visible;

overflow：hidden；溢出内容不显示
overflow：scroll；右侧加上下滚动条查看
overflow：auto；自动依据内容设置上下/水平滚动条

定位

静态(position：static；)默认标签都是静态的即不可改变位置
相对定位(position:relative;)：相对于自己原来标签位置移动

ps：加了relative的标签不管有没有定位，标签性质都变为定位过了
绝对定位(position:absolute;):相对于已经定位过的父标签进行移动(若没有父标签则以body为参照)
固定定位(position:fixed;)：相对于浏览器窗口做定位移动 eg：“回到顶部”

脱离文档流

标签是否脱离文档流指标签原来占用的位置是否还在

不脱离文档流：相对定位
脱离文档流：浮动固定定位绝对定位

z-index模态框

如百度的登录界面：将页面分为三层底层中间黑层最顶层
指z轴离用户的距离相对大小用z-index大小(任意数字)来区分越大表示越在上层
如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
	body{margin:0px}
	#cover {background-color:rgba(0,0,0,0.5);top:0;bottom:0;
			right:0;left:0;position:fixed;
			z-index:99;}
	#modal {background-color:white;position:fixed;
			left:50%;top:50%;width:400px;height:200px;
			margin-left:-200px;margin-top:-100px;
			z-index:100;}
</style>
</head>
<body>
	<div>这是最底层</div>
	<div id="cover"></div>
	<div id="modal">
		<h1>登录界面</h1>
		<p>username:<input></p>
		<p>password:<input></p>
		<button>点我点我~</button>
	</div>
</body>
</html>