写在前面:本文简单介绍一下css的三大特性:层叠性、继承性、优先级。以及margin,padding,浮动,定位几个知识点。限于水平,不深入探讨,仅作为学习总结。

1,三特性

1)层叠性:同标签同权重下,样式冲突,后面的样式会覆盖前面的。

2)继承性: 给父元素设置样式的时候,子元素在默认没有样式的情况下会受父元素的样式影响。注意宽高不能继承。

可继承的属性:
  ◇文字颜色可以被继承  color
  ◇与文字相关的属性都可以被继承
  ◆行高(line-height) 可以被继承
  ◆text-align

特殊情况:

a 标签默认情况下不会受父级元素的颜色影响

常见的在制作nav 中给li 设置颜色a标签不起作用,原因是受到浏览器默认的样式影响 color: -webkit-link。

h1-h6 默认单位是em 具体大小要乘积运算

3)优先级:

标签选择器<类选择器 <ID选择器 < 行内样式 <! Important

2,Margin 的特点:

1)垂直外边距合并(取大的)

2)垂直外边距塌陷?

解决方法:

给父元素设置边框。
 给父元素设置 overflow:hidden(触发bfc)

3,Padding值特殊性

在块级元素中,如果默认子元素没有设置宽度,给当前子元素设置padding值,不会影响当前子盒子的宽度。(“继承”的盒子padding值不会影响)

4,浮动

为什么用浮动?

开始是作为 图片文字环绕效果设计现在多用在布局和导航 制作

什么时候清理浮动?
1,父容器没有设置高度
2,父容器所有子元素都设置浮动

如何清理浮动?(这里介绍常见的4种)
1,clear:both;
2,给父元素设置overflow:hidden;(父元素没有定位)
3,使用伪元素

.clearfix
:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1;
/*兼容ie6*/
}

4,display: table;

.clearfix:before,
.clearfix:after{
clear: both;
display: table;
/*表格模式*/
}
.clearfix{
zoom: 1;
/*兼容ie6*/
}

  

定位:

1,静态(static)标准流下的显示方式,可转换成其他定位方式
2,绝对 (absolute) :
1)标准流下的盒子,设置绝对定位以body 为参照
2)除了父盒子设置static ,其他定位方式,子盒子以父盒子为参照
3)绝对定位的元素脱标
4)实现模式转换的效果
使用场景:1,盒子压盒子 2,绝对定位可以使用margin padding
3,相对(relative):相对自己作为参照,不会脱标
使用子绝父相
4,固定(fixed):
1)以body标签可视区域作为参照
2)脱标
3)实现模式转换的效果
层级:
1)定位的元素有层级关系
2)只有给定位的元素才能设z-index
特点:
1)元素设置定位后有个默认的z-index :auto(除去static)
2)z-index 值相同 元素后来居上
3)z-index 值越大 当前的元素层级越高
4)父元素的z-index值越大 当前的元素层级越高简单

  绝对定位如何居中?

◆通过设置left:50% ;         父元素宽度的一半
◆设置margin-left:     -元素自己宽度一半;

双飞翼布局

目的:加载文档时先加载中间区域,再加载左右两边

特点:两侧固定,中间自适应

	<div class="container">
<div class="columns mainbox">
<div class="inner">
我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡
机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个
会计课件发卡机看见看见我看见个会计课件发卡机看见看见
</div> </div>
<div class="columns leftbox"></div>
<div class="columns rightbox"></div>
</div>

  

 <style>
body {
min-width: 1000px;
} .columns {
height: 250px;
float: left;
} .container {
height: 250px;
border: 1px solid red;
} .mainbox {
width: 100%;
background: yellow;
} .inner {
margin: 0 300px 0 250px;
word-break: break-all;
} .leftbox {
width: 250px;
background: red;
margin-left: -100%;
} .rightbox {
width: 300px;
background: blue;
margin-left: -300px;
}
</style>

  

CSS入门常见的问题的更多相关文章

  1. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  2. CSS入门指南-4:页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

  3. [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  4. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  5. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  6. 第六十九节,css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  7. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  8. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  9. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

随机推荐

  1. 学习AOP之认识一下Spring AOP

    心碎之事 要说知道AOP这个词倒是很久很久以前了,但是直到今天我也不敢说非常的理解它,其中的各种概念即抽象又太拗口. 在几次面试中都被问及AOP,但是真的没有答上来,或者都在面上,这给面试官的感觉就是 ...

  2. mac osx 安装redis扩展

    1 php -v查看php版本 2 brew search php|grep redis 搜索对应的redis   ps:如果没有brew 就根据http://brew.sh安装 3 brew ins ...

  3. android 使用Tabhost 发生could not create tab content because could not find view with id 错误

    使用Tabhost的时候经常报:could not create tab content because could not find view with id 错误. 总结一下发生错误的原因,一般的 ...

  4. SQL Server-聚焦APPLY运算符(二十七)

    前言 其实有些新的特性在SQL Server早就已经出现过,但是若非系统的去学习数据库你会发现在实际项目中别人的SQL其实是比较复杂的,其实利用新的SQL Server语法会更加方便和简洁,从本节开始 ...

  5. DBA成长路线

    从开发转为数据库管理,即人们称为DBA的已经有好几年,有了与当初不一样的体会.数据是企业的血液,数据是石油,数据是一切大数据.云计算的基础.作为DBA是数据的保卫者.管理者,是企业非常重要的角色.对于 ...

  6. ADO.NET一小记-select top 参数问题

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 最近使用ADO.NET的时候,发现select top @count xxxx 不 ...

  7. JAVA FreeMarker工具类

    FreeMarkerUtil.java package pers.kangxu.datautils.utils; import java.io.File; import java.io.StringW ...

  8. BPM生产安全管理解决方案分享

    一.方案概述生产安全管理是企业生产管理的重要组成部分,组织实施好企业安全管理规划.指导.检查和决策,保证生产处于最佳安全状态是安全管理的重要内容和职责.H3 BPM企业生产安全管理解决方案是一套专门为 ...

  9. BPM嵌入式流程解决方案分享

    一.需求分析由于企业业务的独特性或者企业高层独特的管理思想,很多客户选择了自行开发业务系统的方式来实现独有的竞争力. 这类信息系统通常经过了多年的开发,伴随着企业的发展一直在不断优化,与企业的业务非常 ...

  10. unity3d导出到IOS程序下 集成unity3dAR功能

    转载自: 来自AR学院(www.arvrschool.com),原文地址为:http://www.arvrschool.com/index.php?c=post&a=modify&ti ...