学习python，从入门到放弃（39）

2022-04-26 14:00:42 阅读：194 来源： 互联网

标签：39 入门 python 标签 padding 1px margin 选择器 left

学习python，从入门到放弃（39）

伪元素选择器

通过css操作文本内容

修改首个字体样式

p:first-letter {
            color: red;
            font-size: 48px;
        }

在文本开头添加内容

p:before {
            content: 'hello';
            color: blue;
        }

在文本结尾添加内容

p:after {
            content: 'world';
            color: yellow;
        }

用于后面清除浮动带来的负面影响，用于网站的内容防爬。

选择器优先级

相同选择器

就近原则:谁离标签越近就听谁的。
不同选择器

行内选择器 > id选择器 > 类选择器 > 标签选择器

字体样式

文字字体
```
font-family: "Microsoft Yahei"
```
字体大小
```
font-size: 24px
```
字体粗细
```
font-weight: lighter\bolder
```

字体颜色

color: red;
color: rgb(128, 128, 128);
color: #4f4f4f;

文字属性

文字对齐
```
text-align:center/left/right
```

文字装饰

text-decoration: none;  主要就是用于去除a标签的下划线
text-decoration: line-through;   删除线
text-decoration: overline;		上边线
text-decoration: underline;		下划线

首行缩进
```
text-indent: 32px;
```

背景属性

背景颜色
```
background-color: red;
```

背景图片

background-image:url("111.png");
background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
background-position:left top;  图片位置
    
background-attachment: fixed;  背景附着

背景图片如果没有设置的区域大，那么默认自动填充满。

边框

自定义调整每个边的边框

border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;

统一调整每个边的边框

dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
```
border: 5px solid black;  顺序无所谓 只要给了三个就行
```
画圆
```
border-radius: 50%
```

display 属性

只要块儿级标签可以设置长宽，行内标签是不可以的(长宽有内部文本决定)

display:inline  让标签具备行内标签的特性(不能设置长宽)
display:block   让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block  使元素同时具有行内元素和块级元素的特点
display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留

盒子模型

所有的标签其实都有一个盒子模型

快递盒组成部分											盒子模型
	内部物品											content(内容)
	内部物品与盒子内部的距离	padding(内边距、内填充)
	盒子的厚度											border\边框
	盒子与盒子之间的距离		  margin(外边距)

两个标签之间的距离，有时候可以用 margin 也可以用 padding。

margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px	  上 右 下 左
margin: 1px 2px 3px				上 左右  下
margin: 1px 1px						上下	左右
margin: 1px								统一设置一个值
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding: 1px 2px 3px 4px	  上 右 下 左
padding: 1px 2px 3px				上 左右  下
padding: 1px 1px						上下	左右
padding: 1px							统一设置一个值

浮动

浮动的作用
```
float: left/right;
```
浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的文档流，是多个块儿级标签可以在一行显示(全部飘在了空中)。
浮动的影响

浮动会造成父标签塌陷，浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来。

解决浮动造成的影响

规定元素的哪一侧不允许其他浮动元素

clear: left;

推导流程

直接写div然后写对应的长宽
写div然后添加clear属性避免去查找长宽

万能公式(固定搭配记住就可以)

.clearfix:after {
            content: '';
            clear: both;
            display: block;
        }

提前写好上面的代码，哪个标签塌陷了就给谁添加上 clearfix 类名即可。

标签：39,入门,python,标签,padding,1px,margin,选择器,left
来源： https://www.cnblogs.com/lajiaomao/p/16194516.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

学习python，从入门到放弃（39）