(1)CSS选择器优先权选择。

优先权从大到小的选择如下:

  • 标有!important关键字声明的属性
  • HTML中的CSS样式属性 <div style="color:red"></div>
  • 作者编写的CSS文件 <link href='xx.css'>
  • 用户浏览网页在浏览器中设置的样式
  • 浏览器默认的样式

对于ID选择器.类选择器等,其优先级从大到小分别是:

  

  • 直接在标签中写入样式<div style="color:red"></div> 优先积分1000
  • ID选择器    优先积分100
  • 类选择器    优先积分 10
  • 标签选择器 div{color:blue;}  优先积分1

举个例子,对于

<div>
<p class="hi">hello world</p>
</div>

在CSS中如果有 div.hi{color:red;};其优先级是1+10=11.

(2)页面布局——两列自适应高度和两列等高布局

先布置页面结构

<div id="header">
头部信息
</div>
<div id="container">
<div class="mainBox">
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
</div>
<div class="sideBox">
侧边栏
<p> 主要内容区域</p>
<p> 主要内容区域</p>
<p> 主要内容区域</p>
</div>
</div>
<div id="footer">
底部信息
</div>

container容器中实现两列布局几个要点:

  • 通过float实现mainBox和sideBox左右两列的效果
  • container、sideBox/mainBox不设置高度
  • 如果container设置了margin属性。底部的footer不会和container分开,通过在footer中清除浮动也没效果。通过在container后面加入一个看不见的不可见的块级元素并且清除浮动可以实现
*{
margin:0;
padding:0;
}/* 设置页面中所有元素的内外补丁为0*/
#header,#footer{
height:30px;
background-color:#ccc;
}
#container{
margin:10px 0;
}/*页面主要内容区域*/
.mainBox{
float:left;
width:70%;/*利用百分比定义左右两列占container盒子的宽度*/
color:#fff;
background-color:#333;
}
.sideBox{
float:right;
width:30%;
background-color:#666;
}
#container:after{
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
}/*在container后加入不可见的块级元素 使container和footer分开*/
#footer{
clear:both;
}/*兼容低版本IE 防止底部浮动到container右边*/

两个等高布局可以在两列自适应布局的基础上改进。主要有4种方法:背景模拟、负边距、边框模拟、javascript方式。

负边距方式:主要是在左右浮动的mainBox和sideBox加入非常大的(比如9999px)padding-bottom和很大的负值的margin-bottom,然后在其父元素中加入overflow:hidden;

  #container{
width:960px;
margin:10px 0;
overflow:hidden;
}/*页面主要内容区域*/
.mainBox,.sideBox{
margin-bottom:-9999px;
padding-bottom:9999px;
}

Javascript方式:这个方式简单明了;不需要设置内容区域的高度,利用clientHeight获取区域的高度,对比左右区域高度,然后把高度大的高度赋值给另一个区域。

<script>
var mh=document.getElementById("mainBox");//这里需要对相应区域设置ID,也可以通过getElementByClassName();
var sh=document.getElementById("sideBox");
if(mh.clientHeight<sh.clientHeight){
mh.style.height=sh.clientHeight+"px"; }else{
sh.style.height=mh.clientHeight+"px";
}
</script>

JavaScript真神奇!

CSS读书笔记(1)---选择器和两列布局的更多相关文章

  1. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  2. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  3. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  4. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  5. css两列布局,一边固定宽度,另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  6. 两列布局,读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  7. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  8. CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  9. css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

随机推荐

  1. code runner运行终端的目录设置

    我的github:swarz,欢迎给老弟我++星星 该设置属性为 "code-runner.fileDirectoryAsCwd": true 设置为 true后,终端默认目录为运 ...

  2. 大话数据结构pdf高清版下载

    大话数据结构PDF下载 不得不说严老师版的虽然比较经典,但是真的有点难理解啊,而大话数据结构这本书还是比较不错的,通俗易懂,反正我个人觉得很不错,希望对诸位有帮助. 链接:点击打开 密码:xovz p ...

  3. 亚马逊免费服务器搭建Discuz!论坛过程(一)

    1:申请 目前亚马逊服务器免费12个月,需要一张信用卡即可免费注册领取. 地址:https://aws.amazon.com/cn/free/ 2: 创建实例 2.1进入控制台:https://ap- ...

  4. centos最小化系统安装VMware tool

    1.先执行命令创建环境 yum -y install update yum -y install gcc kernel-headers kernel-devel 2.然后重启reboot 3.挂载,解 ...

  5. Git 基础教程 之 添加远程仓库

    b, 本地内容推送至远程库上         git push -u origin master        实际上是把当前分支master推送到远程仓库,第一次推送时,加上-u参数, 表示Git不 ...

  6. springboot整合mybatis统一配置bean的别名

    mybatis.type-aliases-package=cn.byzt.bean 只需要将 javaBean 的路径配置到 springboot 的配置文件中,这里如果是多个路径,用英文逗号分隔多个 ...

  7. 【ACM】hdu_3782_xxx定律_201308011521

    xxx定律Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. UVa 10465 Homer Simpson(DP 全然背包)

     题意 霍默辛普森吃汉堡  有两种汉堡  一中吃一个须要m分钟  还有一种吃一个须要n分钟  他共同拥有t分钟时间    要我们输出他在尽量用掉全部时间的前提下最多能吃多少个汉堡  假设时间无法用 ...

  9. SE955 激光扫描头设置 通过SSI串口进行设置

    扫描头是能够进行配置的,使其支持与禁用某些条码类型,设置有两种方式,一种是扫一下相应的设置条码,还有一种是通过SSI(simple serial interface)来设置,以下就讲一下SSI的设置方 ...

  10. linux 线程切换效率与进程切换效率相差究竟有多大?

    Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 Are Linux threads t ...