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的样式

　CSS的盒模型

　　　　盒模型概述:

　　　　　　边:边界,让你知道它是京东的还是淘宝的盒子

　　　　　　内边距:解决内部矛盾

　　　　　　外部:解决外部矛盾

　　  　css的padding

　　　　　　padding属于盒子内部的,padding改变盒子得跟着增加

/* 写法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 ;*/

　　　　  以上四种写法都可以

　　　　    但是要记住padding不能设置负值

　　　 盒子 的边框border

　　　　boder-style:solid,double,dotted,dashed

　　　　  border-设置像素,如果用于画图,把盒子的自身宽高给弄掉

　　　　border-color:命名法颜色设置.

border-top-100px ;
border-right-100px ;
border-bottom-100px ;
border-left-100px ;

　　 盒子的外边框margin

　　　　不改变盒子的大小

　　        解决外部矛盾

　　　    两个盒子都具有margin的时候,他俩的外部间距取并没有相加,最两者之间的大值

　　　    能设置负值

　　　    四条边也可以分开设置,写法同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};这是一个不讲道理的用法,你在遇到要清除浮动的情况下,可以考虑词用法

　　　　方法4是一种障眼法,让黑哥出来,再隐藏,给他变成块,又把高度变成0,最后用到clear:both官方推荐写法　　　　

.clearfix:after {
            clear:both ;
            content: "黑哥";
            display: block;
            visibility: hidden;  /* 元素隐藏了 */
            height: 0;
        }
        
        <div class="father clearfix">

　　　  方法5overflow:hiddern;通过这个操作就可以实现清除浮动

　　overflow:

　　　　visible:默认是它,溢出也可见

　　　　hidden:溢出之后隐藏,不占位

　　　　scroll:出来一个滚轮,溢出之后滚轮才能滑动

　　　　auto:不溢出没有滚轮,溢出之后滚轮才出现