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=" ...
随机推荐
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- ASP.NET Aries 入门开发教程4:查询区的下拉配置
背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...
- Microservice架构模式简介
在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...
- C语言 · 矩阵乘法 · 算法训练
问题描述 输入两个矩阵,分别是m*s,s*n大小.输出两个矩阵相乘的结果. 输入格式 第一行,空格隔开的三个正整数m,s,n(均不超过200). 接下来m行,每行s个空格隔开的整数,表示矩阵A(i,j ...
- hibernate多对一双向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...
- mybatis_常用标签
1.<where></where>标签的作用 可以动态的添加where关键字 可以自动去掉第一个拼接条件的and关键字 <where> <if test=&q ...
- c#多线程
一.使用线程的理由 1.可以使用线程将代码同其他代码隔离,提高应用程序的可靠性. 2.可以使用线程来简化编码. 3.可以使用线程来实现并发执行. 二.基本知识 1.进程与线程:进程作为操作系统执行程序 ...
- 【干货分享】流程DEMO-补打卡
流程名: 补打卡申请 业务描述: 当员工在该出勤的工作日出勤但漏打卡时,于一周内填写补打卡申请. 流程相关文件: 流程包.xml 流程说明: 直接导入流程包文件,即可使用本流程 表单: 流程: 图片 ...