CSS入门常见的问题
写在前面:本文简单介绍一下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入门常见的问题的更多相关文章
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- CSS入门指南-4:页面布局
这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]
CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- 第六十九节,css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
随机推荐
- 【原】谈谈对Objective-C中代理模式的误解
[原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...
- Android 自定义 attr
好纠结,弄了一个下午老是报错如是总结一下安卓自定视图和自定义属性. (一)自定义属性 在Values文件下建立一个attrs.xml文件,attr的format可以参考:http://www.cnbl ...
- TypeScript为Zepto编写LazyLoad插件
平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...
- [C#] 了解过入口函数 Main() 吗?带你用批处理玩转 Main 函数
了解过入口函数 Main() 吗?带你用批处理玩转 Main 函数 目录 简介 特点 方法的参数 方法的返回值 与批处理交互的一个示例 简介 我们知道,新建一个控制台应用程序的时候,IDE 会同时创建 ...
- AspNetPager分页控件样式的使用
分页是Web应用程序中最常用到的功能之一,AspNetPager 简单实用,应用到项目后台中,棒极了! 自定义样式: <style type="text/css"> ...
- css3更改input单选和多选的样式
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...
- mac好用的markdown编辑器
在刚开始接触markdown的时候,就被吸引了.此后一直在找贴心的好用的markdown编辑器.印象笔记和马克飞象配合着用也是挺好的,唯一的缺点就是比较封闭,发个笔记的链接给同学,还得注册才能看,导致 ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- ORACLE分区表梳理系列(二)- 分区表日常维护及注意事项(红字需要留意)
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...
- SQLite学习笔记(十)&&加密
随着移动互联网的发展,手机使用越来越广泛,sqlite作为手机端存储的一种解决方案,使用也非常普遍.但是sqlite本身安全特性却比较弱,比如不支持用户权限,只要能获取到数据库文件就能进行访问:另外也 ...