A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

猛男

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 猛男 初级黑马   /  2019-4-19 22:51  /  845 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

选择器使用:
可以分为:基础选择器和高级选择器(复合选择器)
基础选择器:标签选择器、类选择器、id选择器
高级选择器(复合选择器):后代选择器、指定标签选择器、并集选择器
类选择器:
定义: 在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义
调用:在html里面哪个标签需要,就在开始标签敲空格class=“类名称”进行调用
注意:命名规则是不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束
id选择器:
定义: 在css里面用 “  #  ”   +  id名称 +{ css键值对 } 进行样式定义
调用:在html里面哪个标签需要,就在开始标签使用id=“id称”进行调用
注意:命名规则是不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束
类选择器和id选择器的使用区别:
类选择可以重复使用,只要样式一致就可以重复的使用同一个类名称,id选择器是唯一的不能重复使用,一个id名称一个页面只能出现一次
后代选择器:
因为Html布局有嵌套关系,我们可以通过父亲再往下找,找到子集元素,父级 + 空格+子级元素{ css键值对}
并集选择器:
样式一致的盒子如果单独设置样式需要书写多次,我们可以把样式相同的盒子只写一个样式,用英文的逗号隔开即可,使用并集选择器书写代码可以节约代码量
链接的伪类:
四种状态:
a:link 未访问的链接(访问前)
a:visited 已访问的链接(访问后)
a:hover 鼠标移动到连接上(鼠标经过)
a:active 选定的链接(按下鼠标的时候)
注意:以上的顺序不能颠倒,四种状态不会全部使用
盒子的实体化三属性:

宽 width
高height
背景  background
实体化设置的好了就不会出现兼容问题,更能直观的表现出盒子的状态
权重计算
第一等:代表内联样式,如: style=””,权值为 1,0,0,0
第二等:代表ID选择器,如:#content,权值为 0,1,0,0
第三等:代表类,伪类和属性选择器,如.content,权值为 0,0,1,0
第四等:代表类型选择器和伪元素选择器,如div p,权值为 0,0,0,1
平时的样式有时候不生效可能就是权重不够,可以添加权重使得样式生效,权重计算不进位
-------------------------------------------------------------------------------------------------
内边距:padding   拉开内容到盒子边缘的距离;
外边距:margin    拉开盒子与盒子之间的距离;

盒子阴影
box-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影
实际常用设置:box-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色
浮动布局的注意点
利用浮动布局的时候,建议给浮动的元素嵌套一个父级元素,然后给父级最好设置固定的高度,就减少出现兼容问题
所有的浮动布局在效果图量取的宽高必须一模一样
清除浮动
环境1:标准流(默认情况下):父级盒子嵌套子级盒子,如果不给父级盒子设置固定的高度,父级盒子默认的高度为0,但是实际的高度是子级盒子撑开的
环境2:浮动流(浮动布局):父级盒子嵌套子级盒子,如果不给父级盒子设置固定的高度,父级盒子里面的子级盒子设置浮动float属性,父级盒子的高度不会被撑开,就是默认的0,这样就会影响我们后面的盒子正常显示
清除浮动本质
父级盒子因为子级浮动引起内部高度为0的问题,清除浮动之后,父级就会根据浮动的盒子自动检测高度,从而解决影响下面盒子的布局问题
清除浮动的方法
额外标签法,父级加overflow属性法,使用after伪元素法,使用双伪元素清除浮动
额外标签法:在浮动元素的末尾添加一个空的标签:例如:<div style=“clear:both;”></div>
父级加overflow属性法:直接给父级添加overflow:hidden,强制的撑开父级
after伪元素法:
.clearfix:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
}
.clearfix {
    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
双伪元素清除浮动
.clearfix:before ,.clearfix:after {
                content: "";
                display: table;
}
clearfix:after {
             clear:both;
}
.clearfix {
            *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}


















0 个回复

您需要登录后才可以回帖 登录 | 加入黑马