首页 > Web开发 > 详细

CSS

时间:2018-02-15 10:17:27      阅读:311      评论:0      收藏:0      [点我收藏+]

1、列表

         1、有序

                  <ol></ol>

                  <li></li>

                  属性:

                          1、type

                          2、start

         2、无序

                  <ul></ul>

                  <li></li>

                  属性:

                          1、type

                                   取值:

                                            circle

                                            square

                                            disc(默认)

                                            none

         3、定义列表

                  <dl>

                          <dt></dt>

                          <dd></dd>

                  </dl>

2、结构标记

         <header></header>

         <nav></nav>

         <section></section>

         <article></article>

         <aside></aside>

         <footer></footer>

3、表单

         1、表单元素

                  <form></form>

                  属性

                          1、action

                                   表单提交的服务器程序路径

                          2、method

                                   1、get

                                   2、post

                          3、enctype

                                   1、application/x-www-form-urlencoded

                                   2、multipart/form-data

                                   3、text/plain

         2、表单控件

                  1、input元素

                          语法:<input>

                          属性:

                                   1、type

                                   2、name

                                   3、value

                                   4、disabled

                          1、文本框与密码框

                                   <input type="text">

                                   <input type="password">

                                   属性:

                                            1、maxlength

                                            2、readonly

                          2、单选按钮和复选框

                                   1、单选按钮

                                            <input type="radio">

                                            属性:

                                                     name:分组,一组中最多只能有一个按钮被选中

                                                     checked:默认被选中

                                   2、复选框

                                            <input type="checkbox">

                                                     name:分组,在后台服务器中,可以以一个组名获取所有的选中值。

                                                     checked:默认被选中

                          3、按钮

                                   1、提交按钮

                                            <input type="submit">

                                            功能:提交表单数据到服务器

                                   2、重置按钮

                                            <input type="reset">

                                            功能:将表单数据恢复到初始化

                                   3、普通按钮

                                            <input type="button">

                                            功能:执行客户端脚本

                          4、隐藏域和文件选择框

                                   1、隐藏域

                                            <input type="hidden">

                                   2、文件选择框

                                            <input type="file">

                                            注意:

                                                     1、表单的 method 必须为post

                                                     2、表单的 enctype 必须为 multipart/form-data

                  2、textarea元素

                          <textarea>内容</textarea>

                          属性:

                                   1、name :名称

                                   2、cols :一行中的字符数,变相设置宽

                                   3、rows :默认显示多少行数据

                                   4、readonly

                  3、select 和 option 元素

                          选项框(下拉选项框,滚动列表)

                          <select></select>

                                   name:名称

                                   size:大于1的话则为滚动列表

                                   multiple:设置多选

                          <option></option>

                                   value:值

                                   selected:预选中

                  4、其他元素

                          1、为控件分组

                                   <fieldset>

                                            <legend>组名</legend>

                                   </fieldset>

                          2、关联文本与表单控件

                                   <label>文本</label>

                                   属性:

                                            for:要关联的表单控件的ID值

                          3、按钮

                                   <button>内容</button>

                                   注意:

                                            该元素 放在  form 中则为提交按钮,否则为普通按钮(IE除外)

4、其他元素

         1、浮动框架

                  <iframe>内容</iframe>

                  属性:

                          src:引入浮动框架的url

                          width:

                          height:

                          frameborder:浮动框架的边框

         2、摘要与细节

                  <details>

                          <summary></summary>

                  </details>

         3、度量元素

                  <meter>内容</meter>

                  min:最小值,默认为0

                  max:最大值,默认为1

                  value:显示的度量值

         4、高亮显示

                  <mark></mark>

         5、时间元素

                  <time>文本内容</time>

                  datetime:关联的日期时间

=================================

1、CSS概述

2、CSS语法

3、尺寸与边框

=================================

1、CSS概述

         1、问题

                  1、设置页面中所有的文本颜色为红色

                  2、页面中所有的div里面的文本的颜色变为 蓝色

                  3、页面中所有的div里面的文本的颜色变为 绿色

 

                  HTML元素属性的弊端:

                  1、想完成相同效果,却要使用不同属性

                  2、HTML元素改变的样式可重用性不高

         2、CSS

                  CSS:Cascading Style Sheets

                  层叠样式表,级联样式表,样式表

                  特点:

                          1、实现了网页内容与表现相分离

                          2、提高了代码的可重用性和可维护性

         3、CSS与HTML之间的关系

                  1、HTML用于构建网页的结构

                  2、css负责构建HTML页面元素的样式

         4、HTML属性和CSS样式的使用原则

                  W3C建议 尽量使用CSS样式取代HTML属性

                  1、修改文本的颜色

                          推荐使用css的color属性

                  2、修改元素的背景颜色

                          推荐使用css的background-color属性

 

                  如果是HTML元素所特有的属性的话,只能使用HTML元素属性

                  td元素属性colspan

         5、使用CSS样式表的方式(重点)

                  1、内联方式

                          作用:将样式定义在单个的HTML元素中

                          语法:

                          <ANY style="样式声明1;样式声明2"></ANY>

                          样式声明语法:

                                   样式属性:属性值

                          eg:

                                   1、文本颜色的样式属性

                                            color:red;

                                   2、背景颜色的样式属性

                                            background-color:green;

                                   3、文本大小的样式属性

                                            font-size:24px;

                          练习:设置页面上的 某个 div 元素中的 样式 , 文本颜色为 黄色(yellow),背景颜色为黑色(black),字体大小为48像素

                  2、内部样式表

                          1、特点

                                   应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性,同时体现内容与表现相分离

                          2、语法

                                   1、在 <head>元素中 增加 <style></style>标记用来声明样式

                                   2、在 <style></style>元素中 编写若干 “样式规则”

                                            样式规则语法规范:

                                                     1、选择器

                                                             作用:规范了页面中哪些元素能够使用声明好的样式

                                                             eg:

                                                                      元素选择器

                                                                      p  div  span

                                                     2、若干样式声明

                                                             属性:值;属性:值;

                                                    

                                                     选择器{若干样式声明}

 

                                                     练习:使用内部样式表,控制页面中所有的p标记,文本颜色为yellow色,背景颜色为black色,文字大小为 24px

                  3、外部样式表

                          1、作用

                                   以独立的css样式表文件保存样式规则,可以应用在各个页面中

                          2、使用步骤

                                   1、创建单独的样式表文件(*.css)

                                            在该文件中可以编写若干样式规则

                                   2、在需要使用该样式表文件的页面上,引入样式表文件

                                            在页面的<head>元素中添加以下代码:

                                            <link rel="stylesheet" href="样式表文件url">

                  4、基本排错

                          1、Styles 中提示 "Unknown property name"

                                   说明 样式属性名称 写错了

                          2、Styles 中提示 "Invalid property value"

                                   说明 样式属性值 写错了

 

 

 

 

 

1、CSS样式表使用方式

         1、内联方式

                  <ANY style="样式声明">

         2、内部样式表

                  <head>

                          <style>

                                   样式规则

                                   样式规则

                                   ... ...

                          </style>

                  </head>

         3、外部样式表

                  1、创建 **.css 文件

                  2、<link rel="stylesheet" href="">

2、CSS样式基础语法

         1、样式声明

                  属性:值;

                  color:red;

                  background-color:yellow;

                  font-size:12px;

         2、样式规则

                  选择器{

                          样式声明;

                          样式声明;

                          ... ...

                  }

3、选择器

         1、通用选择器

                  *{}

         2、元素选择器

                  元素{}

         3、类选择器

                  .className{}

                  引用类选择器

                  <ANY class="className">

 

                  特殊使用-分类选择器

                  元素选择器.类选择器{}

                  p.redColor{}

 

                  特殊使用-多类选择器

                  <ANY class="类选择器1 类选择器2">

         4、ID选择器

                  与元素ID相匹配

                  #idValue{}

 

         5、群组选择器

                  选择器1,选择器2,选择器3{}

         6、后代选择器

                  后代:出现在某元素中的元素

                  选择器1 选择器2{}

         7、子代选择器

                  子代:出现在某元素中的下一级的元素

                  选择器1>选择器2{}

                  <div id="d1">

                          <span></span>

                          <p>

                                   <span></span>

                          </p>

                          <div>

                                   <p>

                                            <span></span>

                                   </p>

                          </div>

                  </div>

                  <p>

                          <span></span>

                  </p>

         8、伪类选择器

                  1、链接伪类

                          :link 未被访问的状态

                          :visited 访问过后的状态

                  2、动态伪类

                          :hover 鼠标悬停时

                          :active 元素被激活时

                          :focus 元素获取焦点时

4、尺寸与边框

         1、尺寸

                  1、宽度

                          width

 

                          min-width

                          max-width

 

                  2、高度

                          height

 

                          min-height

                          max-height

 

                  3、注意

                          页面中 哪些元素允许修改尺寸属性

                          1、所有的块级元素

                          2、具备width和height属性的非块级元素

                                   <table width="" height="">

                                   <img width="" height="">

                  4、溢出

                          属性:

                          overflow

                          overflow-x

                          overflow-y

 

                          取值:

                                   1、visible

                                            默认值,可见

                                   2、hidden

                                            隐藏

                                   3、scroll

                                            滚动条

                                   4、auto

                                            自动

         2、边框

                  1、border:width style color;

                  2、border-方向:width style color

                  3、border-属性:值;

                  4、border-方向-属性:值;

                  注意:

                  1、color 可以取值为 transparent

                  2、取消边框显示

                          border:none;

                          border:0;

************************************

1、边框

2、框模型

3、背景属性

4、渐变

****************************

1、边框

         1、边框倒角

                  属性:border-radius

                          该属性为简写属性,可以设置四个角的倒角半径

                  取值:以px为单位 或 以 % 为单位

 

                  单角定义:

                          border-top-left-radius:左上角

                          border-bottom-right-radius:右下角

                          border-bottom-left-radius:左下角

                          border-top-right-radius:右上角

         2、边框阴影

                  给元素增加阴影

                  属性:box-shadow

                  取值:多属性值列表

                          box-shadow:h-shadow v-shadow blur spread color inset;

                          h-shadow:必须 阴影的水平偏移距离,取值为正,向右偏,取值为负,向左偏

                          v-shadow:必须 阴影的垂直偏移距离,取值为正,向下偏,取值为负,向上偏

                          blur:可选,模糊距离

                          spread:可选,阴影的扩充尺寸

                          color:可选,阴影的颜色

                          inset:可选值,将默认的外阴影改为内阴影

         3、轮廓

                  1、什么是轮廓

                          绘制于元素边框周围的一条线

                  2、属性

                          outline:width style color;

                          outline-width:宽度

                          outline-style:样式

                          outline-color:颜色

 

                          常用:

                                   outline:0;

                                   outline:none;

 

         练习:

                  在作业基础上,完成以下操作

                  1、设置图像的边框倒角

                  2、鼠标悬停在图像上时,将边框由现有样式变成2px粗细,red边框颜色并且,不能有任何的位置变化

2、框模型(重难点)

         1、框模型

                  框:盒子(box)

                          页面元素皆为框

                  框模型:(box-model)定义了元素处理内容,内边距,外边距,边框的一种方式

 

                  元素的 width和height属性 指定了内容区域的宽度和高度

 

                  元素的边框是绘制于元素外围的一条线,会扩大元素的占地尺寸

 

                  内边距和外边距 也会增加元素的占地尺寸,但不会影响元素的内容区域

 

                  元素的实际宽度=左右外边距+左右边框+左右内边距+width

 

                  元素的实际高度=上下外边距+上下边框+上下内边距+height

         2、外边距

                  1、什么是外边距

                          围绕在元素边框周围的空白区域

                          作用:

                                   1、控制元素与元素之间的距离

                                   2、移动元素位置

                  2、属性

                          margin:四个方向的外边距

                          margin-方向:单边设置

                          margin-top:上外边距

                          margin-bottom:下外边距

                          margin-left:左外边距

                          margin-right:右外边距

 

                          取值:

                                   1、px 像素

                                   2、%

                                   3、auto(自动)

                                   4、负值

 

         3、内边距

 

 

 

 

 

 

 

 

 

 

1、边框

         1、边框倒角

                  border-radius

                  取值:

                          1、px

                          2、%

         2、边框阴影

                  box-shadow

                  取值:

                          h-shadow:水平位置

                          v-shadow:垂直位置

                          blur : 模糊距离

                          spread :大小

                          color :颜色

                          inset :值,内阴影

         3、轮廓

                  outline:width style color;

                  outline-width:

                  outline-style:

                  outline-color:

 

                  outline:0;

                  outline:none;

2、框模型

         定义元素处理内容尺寸,边框,内边距和外边距

 

         元素总宽度=左右外边距+左右边框+左右内边距+width

 

         1、外边距

                  属性:

                          margin:

                          margin-top:

                          margin-right:

                          margin-bottom:

                          margin-left:

                  取值:

                          1、px

                          2、%

                          3、auto

                                   只对 左右 有效,上下无效

                                   处理块级元素的水平居中对齐

                          4、负值

                                   移动元素

                                   margin-left:-10px;左移动

                                   margin-left:10px;右移动

                                   margin-top:-10px;上移动

                                   margin-top:10px;下移动

                  margin取值数量

                          margin:value;

                          margin:v1 v2;

                          margin:v1 v2 v3;

                          margin:v1 v2 v3 v4;

                  特殊注意:

                          1、外边距合并

                          2、外边距溢出

                          3、行内元素行内块元素

                                   行内元素:对上下外边距无效

                                   行内块元素:设置上下外边距会影响整行元素

         2、内边距

                  padding:

                  padding-top:

                  padding-right:

                  padding-bottom:

                  padding-left:

                  取值:

                          1、px

                          2、%

                  注意:

                  1、设置了内边距后,会扩大元素的边框内的占地尺寸

                  2、为行内元素设置内边距时,只会影响到自己,不影响其他元素

         3、属性 - box-sizing

                  指定元素边框内距离计算模式

                  属性:box-sizing

                  取值:

                          1、content-box

                                   border和padding会在width和height基础上额外计算

                          2、border-box

                                   border和padding会计算在width和height之内

 

3、背景

         1、background-color

         2、background-image

                  取值:url(图像url);

         3、background-repeat

                  repeat,no-repeat,repeat-x,repeat-y

         4、background-size

                  取值:

                          1、width height

                          2、width% height%

                          3、cover

                          4、contain

         5、background-attachment

                  取值:

                          scroll

                          fixed

         6、background-position

                  取值:

                          1、x y

                                   x:水平偏移距离

                                            + :右移动

                                            - :左移动

                                   y:垂直偏移距离

                                            + :下移动

                                            - :上移动

                          2、x% y%

                           3、left,right,center,top,bottom

         7、background:color url() repeat attachment position;

 

******************************

1、渐变

         1、什么是渐变

                  多种颜色变化的一个过程

 

                  分类:

                          1、线性渐变

                          2、径向渐变

                          3、重复渐变(线性,径向)

                  特点:

                          1、渐变都有填充方向(线性渐变)

                          2、色标(颜色,位置)

         2、语法

                  属性:background-image

                  取值:

                          1、linear-gradient():线性渐变

                          2、radial-gradient():径向渐变

                          3、repeating-linear-gradient():重复线性渐变

                          4、repeating-radial-gradient():重复径向渐变

         3、线性渐变

                  语法:background-image:linear-gradient(angle,color-point,color-point,...);

                  1、angle

                           渐变的方向或角度

                          取值:

                                   to top : 从下向上填充渐变色

                                   to right:从左向右填充渐变色

                                   to bottom:从上向下填充渐变

                                   to left:从右向左填充渐变色

 

                                   0deg : 0度->to top

                                   90deg: 90度->to right

                                   180deg:180度->to bottom

                                   270deg:270度->to left

                  2、color-point

                          色标:表示颜色及其颜色出现的位置

                          ex

                                   red 0% : 开始的时候是红色

                                   blue 25%:25%的时候变成蓝色

 

                                   red 0px : 开始的时候是红色

                                   blue 25px:到25px的位置处,变为蓝色

                  练习:创建一个 400*400的div元素,从下向上分别填充red(0%),blue(50%),green(100%) 颜色

         4、径向渐变

                  语法:background-image:radial-gradient([size at position],color-point,color-point);

                  1、size at position

                          size:表示圆的半径

                          position:圆心位置,取值可以为 数值,百分比,关键字

 

                          该参数可以省略的,圆心位置在元素的正中间

         5、重复渐变

                  语法:

                          background-image:repeating-linear-gradient(同线性渐变);

 

                          background-image:repeating-radial-gradient(同径向渐变);

         6、浏览器兼容性

                  对不支持渐变的浏览器可以增加浏览器前缀来解决兼容性

                  Firefox : -moz-

                  Chrome&Safari :-webkit-

                  Opera:-o-

                  IE : -ms-

 

                  background-image:linear-gradient();

 

                  如果浏览器不支持 属性的话 , 那么前缀就加在属性名称前

                  ex:

                          animation,css3中所出的新属性

 

                          -webkit-animation:值;

                          -moz-animation:值;

                          -o-animation:值;

                 

                  如果浏览器支持属性但不支持值得花,那么前缀就加在值前

                  ex:

                          background-image:linear-gradient();

                          linear-gradient()是CSS3中出现的新属性值。

 

                          background-image:-webkit-linear-gradient();

                          background-image:-moz-linear-gradient();

                          background-image:-o-linear-gradient();

2、文本格式化

         1、字体属性

                  1、字体

                          属性:font-family

                          取值:value,value

                          注意:

                                   字体取值中包含特殊符号和中文的话,要用 "" 引起来

                          ex:

                                   font-family:Arial,"microsoft yahei";

                  2、字体大小

                          属性:font-size

                  3、字体加粗

                          属性:font-weight

                          取值:

                                   1、normal:正常显示,大部分标记的默认值

                                   2、bold : 加粗

                                   3、无单位数值

                                            400~900

                                            400 : normal

                                            900 : bold

                  4、字体样式

                          属性:font-style

                          取值:

                                   1、normal 正常

                                   2、italic 斜体

                  5、小型大写字母

                          Aa Bb Cc Dd

                          属性:font-variant

                          取值:

                                   1、normal

                                   2、small-caps

                  6、字体属性

                          属性:font

                          取值:style variant weight size family;

                          ex:

                                   font:bold 12px "Arial";

                                   font:12px bold "arial";不对

 

                          注意:

                                   使用font属性的话,一定要加上 family的值,否则没效果

         2、文本属性

                  1、文本颜色

                          属性:color

                  2、文本排列

                          作用:控制元素中的文本、行内、行内块元素的水平对齐方式

                          属性:text-align

                          取值:left/center/right

                  3、文字修饰

                          属性:text-decoration

                          取值:

                                   1、none

                                            没有

                                   2、underline

                                            下划线

                                   3、overline

                                            上划线

                                   4、line-through

                                            删除线 --> <s></s>

                  4、行高

                          作用:指定一行文本的高度。如果行高高于文字本身大小,那么文本将在指定的行高范围内垂直居中显示

                          属性:line-height

                          取值:数值

                  5、首行文本缩进

                          属性:text-indent

                          取值:value

                  6、文本阴影

                          属性:text-shadow

                          取值:h-shadow v-shadow blur color;

3、表格

         1、表格常用属性

                  1、边距属性:padding

                  2、尺寸属性:width,height

                  3、文本、字体属性

                  4、背景属性:background ...

                  5、边框属性: border

                  6、垂直方向对齐:vertical-align

                          取值:top/middle/bottom

         2、表格特有属性

                  1、边框合并

                          属性:border-collapse

                          取值:

                                   1、separate

                                            默认值,分离边框模式

                                   2、collapse

                                            合并

                  2、边框边距

                          属性:border-spacing

                          作用:控制相邻单元格之间的距离

                          取值:

                                   1个值:水平和垂直间距相同

                                   2个值:第1个值表示水平间距,第2个值表示垂直间距。两个值之间用空格隔开

                          注意:border-collpase的值必须为 separate时才能设置边框边距

                  3、标题位置

                          标题:<caption></caption>

                          默认位置:表格上方水平居中

                          属性:caption-side

                          取值:

                                   1、top :默认值

                                   2、bottom : 标题位于表格之下

                  4、显示规则

                          作用:如何去布局一个表格,指定了表格显示单元格,行的算法规则, 又称为 表格布局

                          属性:table-layout

                          取值:

                                   1、auto :自动,自动表格布局(默认值)

                                            列宽度是由内容来决定的

                                   2、fixed :固定,固定表格布局

                                            列宽度有表格以及单元格所设定好的数据为主

                          auto与fixed的区别:

                          1、自动表格布局

                                   1、单元格大小会适应内容

                                   2、表格复杂时会比较慢

                                   3、适用于不确定每列大小时使用

                                   4、自定布局算法较慢,但是能反映传统的HTML表格

                          2、固定表格布局

                                   1、列宽度取决于表格的宽度,列的宽度

                                   2、会加速显示表格

                                   3、固定表格布局算法比较快,但不够灵活

4、浮动(重点)

 

 

 

1、渐变

         1、线性渐变

                  background-image:linear-gradient(angle,color-point,color-point);

                  ex:

                           background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd);

         2、径向渐变

                  background-image:radial-gradient([size at position],color-point,...);

         3、重复渐变

                  属性:background-image

                  取值:

                          repeating-linear-gradient()

                          repeating-radial-gradient()

         4、浏览器兼容性

                  浏览器前缀:

                  Firefox :-moz-

                  Chrome&Safari:-webkit-

                  Opera:-o-

                  IE : -ms-

 

                  1、如果浏览器不支持属性的话,那么将前缀添加在属性名称前

                          animation:值;

                          -webkit-animation:值;

                          -moz-animation:值;

                          -o-animation:值;

                          -ms-animation:值;

                  2、如果浏览器不支持值得话,那么将前缀添加在值前面

                          background-image:-webkit-linear-gradient();

2、文本格式化

         1、字体属性

                  font-family

                  font-size

                  font-style

                  font-weight

                  font-variant

                  font:style variant weight size family;

         2、文本属性

                  color

                  text-align:left/center/right;

                  text-decoration:none/underline/overline/line-through

                  line-height

                  text-indent

                  text-shadow:h v blur color;    

3、表格

         1、表格特有属性

                  1、边框合并

                           属性:border-collapse

                           取值:

                                   1、separate :分离边框,默认值

                                   2、collapse : 合并边框

                  2、边框边距

                                   属性:border-spacing

                                   取值:

                                            1个值:水平垂直间距相等

                                            2个值:

                                                     第1个值表示水平间距

                                                     第2个值表示垂直间距

                  3、标题位置

                                   属性:caption-side

                                   取值:

                                            1、top:默认值

                                            2、bottom

                  4、显示规则

                          属性:table-layout

                          取值:

                                   1、auto

                                            自动表格布局

                                            由内容来决定单元格大小

                                            传统表格布局

                                            速度较慢

                                   2、fixed

                                            固定表格布局

                                            由设定的值来决定单元格大小

                                            加载速度较快,不够灵活

*****************************

1、浮动(重难点)

2、显示

3、列表

4、定位(重难点)

*****************************

1、浮动

         1、定位

                  1、什么是定位

                          元素该出现在网页的哪个位置处

                  2、定位方式

                          1、普通流定位

                          2、浮动定位

                          3、相对定位

                          4、绝对定位

                          5、固定定位

                  3、普通流定位

                          又称为 文档流定位

                          网页元素默认定位方式

                          页面元素

                                   块级元素-从上到下的方式排列

                                   行内元素-从左到右的方式排列

                         

                          <body>

                                   <div id="d1">Hello</div>

                                   <div id="d2">World</div>

                                   <span>Hello</span>

                                   <span>World</span>

                          </body>

                  4、浮动定位

                          1、什么是浮动定位

                                   如果将元素的定位方式设定为浮动定位的话,那么它将具备以下特征

                                   1、浮动元素 会被排除在文档流之外-脱离文档流,不占据页面空间,其他未浮动元素要上前补位

                                   2、浮动元素会停靠在父元素的左边或右边,或平级的其他已浮动元素的边缘上

                                   3、浮动元素依然位于包含框之内

                                   4、浮动定位解决的问题-让多个块级元素在一行内显示

                          2、属性

                                   属性:float

                                   取值:

                                            1、none

                                                     默认值,无浮动定位

                                            2、left

                                                     左浮动,让元素停靠在父元素的左边,或紧挨着左侧已有的浮动元素

                                            3、right

                                                     右浮动,让元素停靠在父元素的右边,或紧挨着右侧已有的浮动元素

                  5、浮动引发的特殊效果

                          1、当父元素的宽度已显示不下所有的已浮动子元素时,那么最后一个子元素将换行显示

                          2、元素一旦浮动起来之后,元素的宽度将变成自适应(内容决定宽度),前提:不指定元素宽度的情况下

                          3、元素一旦浮动起来之后,都将变成块级元素,尤其对行内元素影响较大

                                   块级元素:允许修改尺寸

                                   行内元素:不允许修改尺寸

                          4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的。

                  6、清除浮动影响

                          属性:clear

                          取值:

                                   1、none

                                            默认值,不做任何清除操作

                                   2、left

                                            清除该元素左边(上边)的浮动元素所带来的影响

                                   3、right

                                            清除该元素右边的浮动元素所带来的影响

                                   4、both

                                            清除该元素两边的浮动元素所带来的影响

                  7、浮动元素对父元素所带来的影响

                          由于浮动元素脱离文档流,所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话,那么该元素的高度将变成0

                          解决方案:

                          1、直接设置父元素高度

                                   弊端:必须要知道父元素高度是多少

                          2、设置父元素也浮动

                                   弊端:对后续元素会带来位置的影响

                          3、为父元素设置 overflow 属性

                                   取值:hidden 或 auto

                                   弊端:如果有内容要以溢出的方式显示的话,也一同被隐藏了。

                          4、在父元素中,追加空子级块级元素,并设置其clear属性值为 both

 

 

 

 

 

1、浮动

         1、定位

                  普通流定位(文档流定位)

                  浮动定位

                  相对定位

                  绝对定位

                  固定定位

         2、浮动定位

                  1、特征

                          1、脱离文档流-不占据页面空间,后续元素上前补位

                          2、会停靠父元素的左边或右边,或者停靠在其他平级已浮动元素边缘上

                          3、依然包含在父元素内

                          4、让多个块级元素在一行内显示

                  2、语法

                          属性:float

                          取值:

                                   none/left/right

                  3、浮动引发的特殊效果

                          1、父元素宽度已经不足以包含所有的已浮动子元素,最后一个将换行

                          2、元素浮动起来后,宽度将变得自适应

                          3、行内元素,行内块元素一旦浮动起来后,将变成块级元素

                          4、文本,行内元素,行内块元素采用环绕的方式进行排列,会巧妙的避开浮动元素而不会被压住

                  4、清除浮动

                          属性:clear

                          取值:

                                   none/left/right/both

                  5、浮动元素对父元素带来的影响

                          对父元素高度带来的影响

                          1、设置父元素高度

                                   弊端:必须知道父元素的高度

                          2、设置父元素也浮动

                                   弊端:对后续元素有影响

                          3、为父元素设置 overflow

                                   取值为:hidden 或 auto

                                   弊端:如果有内容要溢出显示也会被一同隐藏了

                          4、在父元素中,追加空块级子级元素,并设置其clear属性为both

                                   <div style="clear:both;"></div>

2、显示

         1、显示方式

                  属性:display

                  取值:

                          1、none

                                   隐藏,脱离文档流-不占据页面空间

                          2、block

                                   块级

                          3、inline

                                   行内

                          4、inline-block

                                   行内块

                                   除radio和checkbox外的其他行内块元素,是允许修改尺寸的

 

                                   允许在一行内显示多个元素

         2、显示效果

                  1、可见性

                          属性:visibility

                           取值:

                                   1、visible

                                            可见的

                                   2、hidden

                                            隐藏,但是会占据页面空间

                                   3、collapse

                  2、透明度

                          属性:opacity

                          取值:0.0(完全透明) ~ 1.0(完全不透明)

                  3、垂直对齐方式

                          属性:vertical-align

                          取值:

                                   1、baseline

                                            基线对齐

                                   2、top

                                   3、middle

                                   4、bottom

         3、光标

                  属性:cursor

                  取值:pointer

3、列表

         1、列表项显示标识

                  属性:list-style-type

                  取值:

                          none

                          ... ...

         2、列表项图像

                  属性:list-style-image

                  取值:url()

         3、列表项位置

                  属性:list-style-position

                  取值:

                          outside :默认值

                          inside :列表项区域之内

         4、列表属性

                  属性:list-style

                  取值:type url positioin

 

                  常用方式:list-style:none;

******************************

1、定位

         1、定位属性

                  1、定位属性

                          属性:position

                          取值:

                                   1、static

                                            默认值,默认定位方式

                                   2、relative

                                            相对定位

                                   3、absolute

                                            绝对定位

                                   4、fixed

                                            固定定位

                          注意:position取值为 relative,absolute,fixed 的元素被称为 已定位元素

                  2、偏移属性

                          作用:移动已定位元素

                          属性:

                                   top:值;

                                   bottom:值;

                                   left:值;

                                   right:值;

                  3、堆叠顺序

                          属性:z-index

                          取值:无单位数值

         2、定位方式-相对定位

                  1、什么是相对定位

                          元素会相对于它原来的位置偏移某个距离

 

                          元素移动位置后,原来所占据的空间依然会保留

                  2、使用场合

                          位置微调

                  3、语法:

                          属性:

                                   position:relative;

                          配合着 偏移属性 实现位置的移动

         3、定位方式-绝对定位

                  1、绝对定位的特征

                          1、元素会脱离文档流

                          2、相对于 最近的 已定位的祖先元素 来实现位置的初始化

                          3、如果元素没有已定位祖先元素,那么它的位置就相对于最初的包含块(body,html)

                  2、语法

                          属性:

                                   position:absolute;

                                   配合着 偏移属性 实现位置的初始化或移动

                  3、绝对定位使用场合

                          弹出菜单

                  4、注意

                          1、绝对定位的元素会变成块级

                          2、绝对定位的元素可以使用 margin来改变位置,但是 margin:auto 会失效

         4、堆叠顺序

                  1、作用

                          处理 已定位元素的 堆叠效果

                  2、默认堆叠效果

                          1、平级元素-后来者居上

                          2、子元素压在父元素之上-子压父

                  3、属性

                          z-index

                          取值:数值越大越靠上

                  4、注意

                          1、取值可以为负

                                   取值为负时,当前元素会位于页面正常显示内容之下

                          2、z-index 是无法改变父子关系的堆叠顺序

         5、固定定位

                  1、什么是固定定位

                          将元素固定在网页的某个位置处

                          不会随着滚动条而发生位置的变化

                  2、语法

                           position:fixed;

                          配合 片以属性 改变元素位置

 

                  3、注意

                          固定定位永远都是相对于浏览器窗口进行位置初始化的。

 

CSS

原文:https://www.cnblogs.com/sidings/p/8449163.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!