CSS+DIV个人学习笔记

简介: 分享CSS+DIV个人学习笔记

CSS选择符的分类


1.标签选择符--针对html标签:p{} h1{}

2.ID选择符--针对某一个id#two{}

3.类选择符--针对某一类,或者某一些元素:.warn{}

4.通配选择符:*{}

5.包含选择符:e1 e2

a) 含义是所有被e1包含的e2

b) table td

6.选择符分组(集体控制):将童颜的样式定义用于多个选择符,选择符之间用逗号分隔。如pdiv.warning{属性:值}

7.标签指定式选择符:

a) h1#content{}:表示针对所有idcontenth1标签

b) h1.p1{}:表示针对所有classp1h1标签

8.组合选择符:h1.p1#content h1{}


CSS的特性



1.继承:子元素会继承父元素的某些样式。

2.层叠:子元素如果定义了与父元素相同的样式,会覆盖掉父元素的样式。

a) 后面的样式,会覆盖前面的样式。


CSS样式的优先权


1.四种方式的优先权:内联式-->内嵌式-->链接式-->@import导入式

2.就近原则

3.作用范围越小,优先权越高

4.离要修饰目标越近的样式优先权越高

5.选择符的优先权:行内>id>class>标签选择符

6.我们可以通过!important语法来提升重要性(优先权)

a) color:green !important;


CSS伪列超链接样式 


如果,鼠标放到超链接不起作用,修改链接状态的顺序为:

:link - > :visited - > :hover - > :active


CSS盒子的相关属性


1.内容属性:内容本身的宽=width,高=height

2.内填充属性:内容与边界之间的距离padding

3.再定义盒子的宽度时,要考虑到。内填充,边框,边界的存在

4.如果增加了内填充,整个盒子的宽度值,要再减去增加的内填充值。


margin/padding的使用:


padding:10px;一个参数:代表上右下左

padding:10px 20px;二个参数:10代表上下 10代表左右

padding:10px 20px 30px;三个参数:10代表上 20代表左右 30代表下

也可以使用padding-left(top,right,botton)

使用外表据margin,要注意浏览器的兼容性

由于各个浏览器存着,内外边距的默认值不同;因此我们需要将所有浏览器的默认内外边距都从零开始。


关于列表的属性


list-stylelist-style-image || list-style-position || list-style-type

列表的样式:列表的图片||列表的符号的位置||列表的样式

通常使用:list-style:none;


边框


borderborder-witdh || border-style || border-color

如果只写border,则后面要跟着的是,三个不同的子属性:粗细,样式,颜色


小技巧:


让盒子水平居中:将对象的左右外边界设置为auto

让盒子中的内容垂直居中:设置行高=盒子的高度,但是不能有换行。


内联元素aemspandisplay:inline)


不能设置宽和高

不影响换行


背景控制


background:颜色 图片 平铺方式 固定方式 位置

background:color image repeat attachment position

背景图片默认情况是进行水平与垂直方向的平铺:background-repeatrepeat;

默认背景图片显示在元素的左上角。

背景图片的依附方式:固定的含义:将图片固定在屏幕的某个位置。background-attachment:fixed;

 

专业点的技巧:


翻转效果:准备2张大小相同,内容不同图片;正常情况显示一张,鼠标经过,显示另一张。

 

CSS精灵技术:主要是为了,减少http请求。

 

CSS布局的方式


1.默认文档流方式:以默认的html元素的结构顺序显示

2.浮动布局方式:通过设置html元素的float属性显示

3.定位布局方式:通过设置html元素的position属性显示

 

浮动


浮动是将块元素的独占一行的行为取消,允许与其同一行。

浮动其实是这个块,从原来的文档流模式中分离出来,它后面的对象,就视它不存在。

 

ulli默认情况下是块元素,要想让他们在一行中显示,就要用浮动。

 

清除浮动:去掉前面对象浮动对后面对象的影响。

 

当父元素没有指定高度时,并且它的子元素有浮动,这时,这个父元素的个高度不会自动增加。

1.方法1:增加一个空的div。缺点:会增加代码。

2.方法2:设置overflow:hidden;

 

定位布局:可以通过元素的position属性控制元素的位置。

当我们要想使用绝对定位时:必须要有两个条件

1.必须给父元素加定位属性,一边拿建议使用position:relative;

2.给子元素加绝对定位position:absolute;同时要加方向属性。

 

相对定位与绝对定位


绝对定位是以父元素为基准点,进行定位。--会脱离文档流

相对定位是根据其自身为基准点,进行点位。--离开原位置,但还占着。

相关文章
|
7月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
116 0
|
28天前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
19 1
|
3月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
39 0
|
4月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
38 0
|
4月前
|
前端开发 容器
理解CSS | 青训营笔记(1)
理解CSS | 青训营笔记
54 0
|
5月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
267 3
|
5月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
388 1