黑马程序员技术交流社区

标题: 【郑州校区】python前端HTML和CSS进阶 [打印本页]

作者: 谷粒姐姐 时间: 2018-12-5 15:38
标题: 【郑州校区】python前端HTML和CSS进阶
知识点预习

1.列表2.选择器
3.CSS的文本样式属性
4.元素溢出
5.盒子模型
6.margin负值技巧
7.垂直外边距合并
8.margin-top塌陷问题

01- 列表

无序列表 ul>li unorder list
清除列表前面的标识 list-sytle:none;
列表默认有外边框和内边距

02- CSS选择器02

[AppleScript] 纯文本查看 复制代码

 /* 1.ID选择器  id是唯一的; 配合js来操作*/

    #three{

        color:blue;

    }

    



   /* 2. strong标签 重要的内容  默认加粗*/

   /* 并集选择器 组选择器 */

   span,strong{

      color:green; 

   }



   /* 3.伪类选择器 '作用在标签身上 改变状态'

   鼠标悬浮: hover

   a:hover{

      color:orange; 

   }



        /* 伪元素  作用在元素'内容身上'*/

   a::before{

        content: "前面增加的内容";

   }



   a::after{

       content: "后面增加";

   }

CSS常用属性

[AppleScript] 纯文本查看 复制代码

/* 1.文本对齐 left  center right*/

    text-align: left;



    /* 2.首行缩进  默认大小16px*/

    /* text-indent: 32px; */

    /* em 文字的倍数 */

    text-indent: 2em;



    /* 3.是否斜体   normal*/

    /* font-style: italic; */



    /* 4.是否加粗  normal*/

    font-weight: bold;

    font-size:10px;

    line-height: 20px;

    font-family: "microsoft yahei";





    /* 连写  一定规则*/

        /* 加粗       斜体  字体大小/行高  字体 */

    font:normal italic 10px/20px "microsoft yahei";

元素溢出

overflow:
- visible 默认超出可视 hidden 超出隐藏裁剪 scroll 可滚动不推荐使用
- auto 自动

05- 盒子模型真实宽高

[AppleScript] 纯文本查看 复制代码

真实的宽 = 左边框'border-left' + 右边框'border-right' + 内容宽'width' + 左边内边距'padding-left' + 右边内边距'padding-right';

真实的高 = 上边框'border-top' + 下边框'border-right' + 内容高'height' + 顶部内边距'padding-top' + 底部内边距'padding-bottom';

margin-使用技巧

[AppleScript] 纯文本查看 复制代码

-        margin-top:负值 合并边框

垂直外边距合并

垂直外边距取上边元素的底部外边距和下边元素顶部外边距的最大值来当两个元素得垂直间距,而不是累加

08- margin-top塌陷问题

当设置子元素的margin-top时,没有作用到子元素自己身上,反而影响了父元素
解决塌陷问题的方式:
- 1.父元素设置边框 border
- 2.父元素设置内边距 padding
- 3.设置元素溢出 overflow:hidden
- 4.通过伪元素
- [AppleScript] 纯文本查看 复制代码
```
.clearfix:before{

        content:"";

        display:table;

}
```

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2