前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器
1.统配选择器
控制html,body及body内跟显示相关的标签
*{
width:80px;
height:80px;
background-color:red;
}
2.类选择器
以class起名的标签,控制class名匹配的标签
(因为标签的class名可以重复)
<div class="foo">123</a>
.foo{ width:80px;
height:80px;
background-color:pink;
}
3.id选择器
以id起名的标签,控制id匹配的标签(id通过css控制是不可以重复的)
<div class="foo" id="heh">456</div>
#heh{width:80px;
height:80px;
background-color:yellow;
}
4.行间式选择器
<div style="width:80px;height:80px;background-color=green;">789<div>
选择器优先级
1.行间式选择器 2.id选择器 3.类选择器 4.统配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{width: 80px;
height:80px;
background-color: blue;}
.foo{width: 80px;
height:80px;
background-color: yellow}
#heh{
width: 80px;
height:80px;
background-color: green;
}
</style>
</head>
<body>
<div style="width: 80px;height: 80px;background-color: red">123</div>
<div class="foo">456</div>
<div id="heh">789</div>
<div>101112</div>
</body>
</html>
#总结,控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
统配<标签<class<id<行间式<!important
*{width:80px;height:80px;background-color:yellow!important;}
#important写在属性值后和;之间
长度与颜色
长度单位:px mm cm em rem vw vh in
vw(百分比宽度,跟整个页面的宽)
vh(百分比高度,跟整个页面的高)
颜色:①颜色单词 red yellow green
②#号十六进制数 范围(000000-FFFFFF)
abc = aabbcc
③三原色rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1)
最后一个参数,透明度,1不透明,0全透明
显示方式display
标签的分类:
一.单双标签:
单标签:br,hr,img,meta,link
功能具体,不需要内容,设置为单标签,单标签结束符在标签尾部,可以省略
主功能
双标签:h1,span,p,div
具有子标签,包含内容,设置为双标签,双标签首尾分离
主内容
二.通过display属性值进行划分
inline block inline-block
①inline :同行显示,支持部分css样式(不支持宽高),宽高由文本内容撑开
②block:异行显示,支持所有css样式,设置了宽高就采用设置的值,宽高由默认的特性
③inline-block:同行显示,支持所有css样式,设置了宽高就采用设置的值
inline-block 是以文本内容作为对齐标准的,要更改对齐标准,需要使用属性vertical(垂直)-align(对齐)
四种属性值baseline(文本底端对齐 默认值)
top:标签顶端对齐 middle:标签中线对齐
bottom:标签底端对齐
总结:带有inline的会同行显示,带有block的支持所有css样式
带有inline的与内容相关,默认对齐标准以内容为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
width:80px;
height:80px;
background-color: red;
}
div{
width:80px;
height:80px;
background-color: yellow;
display: inline-block;
vertical-align: top;
}
img {
width:80px;
}
</style>
</head>
<body>
<span>123456</span>
<span>123456</span>
<div>123456</div>
<div>123456</div>
<img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
</body>
</html>
嵌套关系
页面就是由标签一层层嵌套关系形成
嵌套关系有一定的规则:
1.inline类型只嵌套inline类型的标签
理解:inline就是同行显示,目前的标签<span></span>是同行显示,不常用,而且也不会嵌套标签在其内部
2.inline-block类型,不建议嵌套任意标签,所以系统的inline-block都设计成了单标签(默认宽高)
理解:单标签,我们学了meta,img,link等都是Inline-block类型,都是单标签,自然不会再嵌套标签在其内部
3.block类型可以嵌套任意类型标签(hn,p一般只嵌套inline标签)
最常用的div就是block类型,支持所有css样式,可以嵌套任意类型
如何让div中的内容同行显示,就需要用到盒模型,来配置我们的标签内容
盒模型
1.由四部分组成:
margin :外边距,控制盒子的位置(布局),通过左和上控制自身位置,通过右和下影响兄弟盒子位置(划区域)
border:边框,样式/宽度/颜色
padding:内边距,从显示角度控制文本的显示区域
content(文本内容)
注意:margin,padding:起始为上,顺时针一次赋值,不足边取对边
要做到文本内移,设置padding,如果想显示区域不变,相应减少content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:80px;/*content的参数*/
height:80px;
background-color: red;
padding:10px;/*默认四边间距都是10px*/
/*padding: 10px 5px;从上开始,顺时针赋值,上间距10,右间距5,没赋值的对称匹配*/
/*
padding-bottom: 10px;
padding-left:10px ;
padding-right:10px;
padding-top:10px;*/
border: 5px solid yellow;
/*border三个参数,宽度,颜色,样式(实线,虚线等)*/
/*border-color: yellow;
border-style: dotted;
border-width:5px ;*/
margin: 10px 5px;
/*margin-top:20px ;
margin-left:20px ;
margin-right:20px ;
margin-bottom:20px ;*/
}
</style>
</head>
<body>
<div>123456</div>
<div>654321</div>
</body>
</html>
盒模型布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0} <!--将body外框间距变为0-->
div{
width:78px;
height:33px;
background-color: blueviolet;
border: black solid 1px;
}
.d2{margin-left:calc(80px *1) ;
margin-top:-35px;}
.d3{margin-left:calc(80px *2) ;
margin-top:-35px;}
.d4{margin-left:calc(80px *3) ;
margin-top:-35px;}
.d5{margin-left:calc(80px *4) ;
margin-top:-35px;}
.d6{margin-left:calc(80px *5) ;
margin-top:-35px;}
.d7{margin-left:calc(80px *6) ;
margin-top:-35px;}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
</body>
</html>
margin两个坑
1.要求b1与b2上下间距50px时
方法一:将b1底部加长50px margin-bottom: 50px;
方法二:将b2顶部加长50px margin-top:50px ;
坑:当b1底部和b2顶部同时加长50px时,发现两者间距仍然为50px
总结:盒模型上下间距时,会重叠,间距以两者间距离较大距离为最后的间距
左右叠加正常,不会重叠
<!--需求将b1与b2上下间距50px-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;}
.b1{
width: 80px;
height:80px;
background-color: cornflowerblue;
/*第一种方法
margin-bottom: 50px;*/
margin-bottom:50px;
}
.b2{
width: 80px;
height:80px;
background-color: blue;
/*第二种方法
margin-top:50px*/
margin-top:50px ;
}
</style>
</head>
<body>
<div class="b1">1234</div>
<div class="b2">5678</div>
</body>
</html>
第二个坑 :第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
解决方案: 1.父级设置border-top | 2.父级设置padding-top
向左移动不会有相同现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
.main{
width: 400px;
height:400px;
background-color: red;
/*解决方法1,将父标签内边距改变.将父标签与子标签解耦合
padding: 1px;*/
/*解决方法2,设置父标签上边框
border-top:black solid 1px;*/
}
.sub1{
width: 100px;
height:100px;
background-color: blueviolet;
margin-top:50px/*子标签1会带着父标签一起偏移*/
}
.sub2{
width: 100px;
height:100px;
background-color: yellow;
margin-top: 50px;/*子标签2自己移动并不会带动父标签移动*/
}
</style>
</head>
<body>
<section class="main">
<section class="sub1">
</section>
<section class="sub2">
</section>
</section>
</body>
</html>前端,基础选择器,嵌套关系.display属性,盒模型的更多相关文章
- CSS基础：块级元素与盒模型
简介 在 HTML4.01 中,元素通常可以分为块级元素( “Block-level element” ) 和内联元素 ( "Inline-level element" ) 两大类 ...
- WEB前端基础之SCC(字体颜色背景-盒子模型)
目录 一:伪元素选择器 1.首字调整>>>:也是一种文档布局的方式 2.在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 3.在文本的后面通过css动态渲 ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局
1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...
- 前端基础问题：CSS vertical-align 属性
CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...
- 前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...
- day47 选择器优先级及嵌套关系
复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常 ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- 02 前端基础之CSS
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
随机推荐
- siege官方文档（译）（一）
WHAT IS siege? Siege is an open source regression test and benchmark utility. Siege是一款开源回归测试和基准测试工具. ...
- Unity里面两种单例模式的实现
using System; public class Singleton<T> where T : class, new() { private static T m_instance; ...
- 剖析 Rails 3 MVC 中的数据传递
引用链接:https://www.ibm.com/developerworks/cn/web/1108_linhx_rails3mvc/ 如果读者已经开发过基于 Rails 的应用,但对其 MVC 间 ...
- UEditor的KityFormula在IIS中部署，显示不了的解决方案
在此,首先感谢我的同事,找到了问题所在. 因Web项目中需要有输入公式的功能(高等数学中需要),普通公式插件无法满足,所以找了KityFormula这款插件. 看了下里面的公式,在数学方面确实比较全面 ...
- WIN32项目中MFC程序窗口居中
//class CMainWindow : public CFrameWnd void CMainWindow::OnSize(UINT nType, int cx, int cy){ CFra ...
- ios 自定义加载动画效果
在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果. 在UIViewController的中加载等到效果,如下 - (void)vi ...
- linux各文件夹的作用(转)
转自:http://www.cnblogs.com/amboyna/archive/2008/02/16/1070474.html linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可 ...
- SQL server 数据库基础语句
上篇介绍的是鼠标操作 遗漏两个知识: 主外键 两个列 数据类型 必须一致 //int类型不能约束nvarchar 类型 varchar类型不能约束nvarchar类型 varchar( ...
- hihoCoder #1080 : 更为复杂的买卖房屋姿势 (线段树，多tag)
题意: 有编号为0~n的n+1个房屋,给出每个房屋的起始价格,随后给出m种修改,每次修改都要进行输出所有房屋的价格总和.修改有两种方式:(1)政府调控,编号L~R全置为同一价格(0)房屋自行涨跌,编号 ...
- （八）maven学习之继承
继承 如果项目划分了多个模块,都需要依赖相似的jar包,只需要创建一个父模块,在它的pom.xml文件中配置依赖的jar包.功能模块只需要继承父模块,就可以自动得到其依赖的jar包,而不需要再每个模块 ...