day52 Pyhton 前端03
内容回顾
块级标签:
div
p
h
列表:ol;ul;dl
表格:table
行内标签:
span
a
i/em
b/strong
u/del
行内块:
input
textarea
img
其他:
form
br
hr
⁢
>
css:
三种引入方式:行内式,直接在标签上写
在head里写style标签,在style里书写
在head里写link标签,通过路径导入
基本选择器:4个:
*通配符选择器
id值,id选择器
类名,类选择器
标签名选择器
高级选择器:
后代选择器,body div;能选到body下的所有div
子代选择器,body >div,能选到body下的所有儿子div
弟弟选择器,h1~div;选到的是同级的所有div,就算被隔断也能选到
毗邻选择器,h1 + div,相邻一个或多个div,被隔断就没了
组合选择器,h1,div,body div;这个是多选,常用的操作.解决代码冗余常用
伪类选择器
爱恨准则:LoVe HAte
a:link;没被访问的样子
a:visited;标签被访问后的样子
a:hover:鼠标悬浮的样子,唯一一个可以被其他标签也使用的属性
a:active:点击时的样子
伪元素选择器:
before:前面加内容
after:后边加内容
first-letter:首字母操作
first-line:首行操作
选择器的优先级
从小到大:继承->标签选择器->类选择器->id选择器->行内样式最高
标签的嵌套:
块能嵌套万物
行内只能嵌套行内
行内块不建议进行嵌套
今日内容
盒模型
浮动
CSS的样式
/* 写法1 推荐写法,别怕麻烦*/
padding-top:100px ;
padding-right:100px ;
padding-bottom:100px ;
padding-left:100px ;
/* 写法2 */
/*padding: 100px;*/
/* 写法3 */
/*padding: 100px 200px 300px 400px;*/
/* 写法4:上下对应,左右对应 */
/*padding:0 100px ;*/
border-width:设置像素,如果用于画图,把盒子的自身宽高给弄掉
border-color:命名法颜色设置.
border-top-width:100px ;
border-right-width:100px ;
border-bottom-width:100px ;
border-left-width:100px ;
能设置负值
四条边也可以分开设置,写法同padding
margin-left: 100px;
margin-right: 100px;
margin-top: 100px;
margin-bottom: 100px;
margin-inside: 100px;
margin-outside: 100px;
设置浮动后行内标签可以设置宽高; (行内标签设置宽高的第一种方式,display=inlineblock/block
先让为主
浮动的遮盖了标准的盒子
盒子自动换行,且想让换行的进去一点儿,用margin负值
方法:
方法1:都浮动起来
方法2:给父盒子设置高度
方法3,再加一个div,不建议使用
方法3.5 .clearfix {clear:both};这是一个不讲道理的用法,你在遇到要清除浮动的情况下,可以考虑词用法
.clearfix:after {
clear:both ;
content: "黑哥";
display: block;
visibility: hidden; /* 元素隐藏了 */
height: 0;
}
<div class="father clearfix">
