8.14 Python Web前端 Css学习2

一、选择器优先级进阶

id选择器的优先级是100

class选择器的优先级是10

标签选择器的优先级是1

行间距优先级是1000

计算方式：让每个选择器对应的值相加，谁的值大谁的优先级高

二、文本属性

text-indent：设置首行缩进

text-align：设置文本水平对齐方式

text-decoration：设置下划线

underline下划线

overline上划线

line-through中划线

line-height：设置行与行之间的距离，一般用于单行文本垂直居中vertical-align垂直对齐方式

<head><meta charset="UTF-8"><title>文本</title><style type="text/css">*{margin:0;padding:0;}.item{width: 400px;height: 400px;border: 1px solid red;/*首行缩进*/text-indent: 32px;/*文本水平对齐方式一般用于单行文本*//*text-align: center;*//*行高居中*/line-height: 30px;}.item1{width: 400px;height: 400px;border: 1px solid red;/*添加下划线*//*text-decoration:underline;*//*上划线*//*text-decoration:overline;*//*中划线*//*text-decoration:line-through;*/line-height: 400px;}a{/*去除下划线*/text-decoration:none;}.item2 img{/*让图片和文本的中间对齐*/vertical-align: middle;}</style>
</head>
<body><div class="item"><span>帝高阳之苗裔兮，朕皇考曰伯庸。</span>摄提贞于孟陬兮，惟庚寅吾以降。皇览揆余初度兮，肇锡余以嘉名：名余曰正则兮，字余曰灵均。纷吾既有此内美兮，又重之以修能。扈江离与辟芷兮，纫秋兰以为佩。汩余若将不及兮，恐年岁之不吾与。朝搴阰之木兰兮，夕揽洲之宿莽。日月忽其不淹兮，春与秋其代序。</div><div class="item1">帝高阳之苗裔兮</div><a href="http://www.baidu.com">百度</a><div class="item2">摄提贞于孟陬兮，惟庚寅吾以降。<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2491562693,485434067&fm=26&gp=0.jpg"></div>
</body>

三、布局属性

块元素：独占一行宽度默认是父元素的100% 默认高度由内容决定

支持所有的样式

就算设置了宽度也会独占一行

行内元素：不会独占一行元素排在一行显示，默认宽度是0 高度由内容决定，不支持宽高属性和margin的上下属性

行内块：不会独占一行支持所有的样式默认宽度0 默认高度由内容决定

display：规定元素以哪种元素类型表示

none隐藏

block以块元素显示

inline以行内元素显示

inline-block以行内块元素显示，此元素已经废弃，但是还能用

.inner{width: 200px;height: 200px;background-color: pink;/*转为行内元素*//*display: inline;*//*转为行内块*/display: inline-block;}span{/*宽高是无效的，等它转为块元素时生效*/width: 200px;height: 200px;background-color: red;/*margin: 20px;*//*padding: 20px;*//*display: block;*/display: inline-block;}

overflow

visible默认值

hidden超出部分隐藏

scroll添加滚动条

auto自动检测并添加滚动条

<style>*{margin:0;padding: 0;}.item{width: 100px;height: 100px;border: 1px solid red;/*超出部分隐藏*//*overflow: hidden;*//*添加滚动条*//*overflow: scroll;*//*自动检测内容是否超出 如果超出自动添加滚动条*/overflow:auto;}</style>

四、浮动

元素从上到下，从左到右的排列方式，这种排列规则就是文档流

浮动会脱离文档流，，将后面没有浮动的元素覆盖，浮动不会覆盖文字

浮动只有两个方向left，right

当浮动元素碰到父元素的边界会停止浮动，碰到前面有浮动元素也会停止懂，并在一排显示，如果浮动预算的宽度超过父元素的宽度，会自动换行

如果前面有未浮动的元素，会另起一行进行浮动

浮动遇到的问题：当父元素没有设置固定高度时，子元素全部浮动，会导致父元素高度无法撑开

解决办法：

给父元素设置固定高度
给父元素添加overflow：hidden
给父元素的最后添加一个空标签设置clear:both ，这种方式会添加无意义的空标签影响页面结构所以不推荐
使用伪元素选择，给父元素添加伪类 after

 <style>.wrap{width: 300px;border:2px solid red;/*当子元素碰到父元素的边界时会停止浮动，碰到前面浮动元素也会停止浮动，并在一排显示；如果浮动元素的宽度超过父元素的宽度，会自动换行*//*清除浮动对外部元素的影响*//*当父元素没有设置固定高度，且子元素全部浮动，会导致父元素无法撑开，解决方法之一使用下面这个标签*/overflow: hidden;}/*清除浮动 撑开父元素*/.wrap:after{content: '';display: table;clear: both;}.item1{width: 100px;height: 100px;background: green;/*添加左浮动*//*float: left;*//*右浮动*//*float:right;*/}.item2{width: 100px;height: 100px;background-color: blue;/*float: left;*/}.item3{width: 100px;height: 100px;background-color: #f39;/*float: left;*/}/*通常清除浮动并不使用下面方法*/.clear{/*width: 100px;height: 100px;background: yellow;*//*清除两边浮动产生的影响*//*both left right*//*clear: both;*/}</style>

五、定位 position

相对定位：relative

相对于元素原来的位置进行偏移参考点是原来位置的起始点，不会脱离文档流

绝对定位：Absolute

会脱离文档流默认以body的00点位参考点进行位移

如果父元素有定位属性，绝对定位就以父元素的00点位参考点进行偏移

如果父元素没有定位属性，就找爷爷元素，以此向上找，找到body为止

固定定位(绑定定位)：fixed

脱离文档流，相对于浏览器窗口进行定位

定位的层级：

只能给有定位属性的元素设置

z-index:

相对定位
<style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 600px;height: 600px;border:1px solid red;margin-left: 200px;}.item1{width: 200px;height: 200px;background: #f33;/*相对定位 相对于元素原来的位置来偏移，而非相对于body的位置来偏移*//*不会脱离文档流*/position:relative;top: 200px;/*left: 200px;*/}.item2{width: 200px;height: 210px;background: #606;}</style>
</head>
<body><div class="wrap"><div class="item1"></div><div class="item2"></div></div>
</body>

绝对定位
<style>*{margin: 0;padding: 0;}.wrap{width: 400px;height: 400px;border: 1px solid red;margin-left:100px;position: relative; }.item1,.item2{width: 100px;height: 100px;}.item1{background-color: yellow;/*绝对定位*//*当父元素没有定位属性时，绝对定位生效，绝对定位相对于body的坐标来偏移，并且会浮出文档流。*/position: absolute;top: 100px;left: 100px;}.item2{background-color: blue;}</style>
</head>
<body><div class="wrap"><div class="item1"></div><div class="item2"></div></div>
</body>

 <title>固定定位</title><style>*{margin: 0;padding: 0;}body{height: 2000px;}.item{width: 80px;height: 50px;background-color: green;position: fixed;right: 10px;bottom: 10px;}</style>
</head>
<body><div class="item">返回顶部</div>
</body>

8.14 Python Web前端 Css学习2相关推荐

Web前端开发学习资料分享
2019独角兽企业重金招聘Python工程师标准>>> Web前端开发教程: (1)Web开发必备手册大集合 (2)Web前端开发人员和设计师必读文章推荐(系列一~系列八) (3)[ ...
Python Web框架Django学习（二）
python web框架Django学习(二) 目录: 三.Django创建APP 四.创建登录页面,实现用户交互,后台管理用户(非数据库方式) ========================= ...
web 前端必备学习指南-精华
工具 box-shadow generator 生成 box-shadow 的工具. gradient-generator 渐变生成器. Ultimate CSS Gradient Generator ...
web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
web前端从学习到学废
web前端从学习到学废了解web前端 1.HTML.CSS系列之导学 2.什么是HTML.CSS? 3.宇宙第一编辑器VSCode 4.chrome浏览器 5.深入了解网站开发 6.web三大核心技 ...
不会编程能学前端吗？web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
Web前端系统学习——课程笔记（章节8-9）
Web前端系统学习--课程笔记课程链接:WEB前端系统学习 - 网易云课堂参考教程:菜鸟教程笔记链接:Web-Learn-Note 章节8 表格与表单课时30 表格嵌套规则样式初始化 14: ...
Web前端需要学习什么？小白入门指南
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
web前端需要学习什么？这5点很重要
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...

8.14 Python Web前端 Css学习2

8.14 Python Web前端 Css学习2相关推荐

最新文章

热门文章