HTML+CSS(12)

2018-06-24 02:22:22来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

CSS浮动和清除

  • Float:让元素浮动,取值:left(左浮动)、right(右浮动)。
  • Clear:清除浮动,取值:left(清除左浮动)、right(清除右浮动)、both(同时清除上面的左浮动和右浮动)。

1、CSS浮动

l  浮动的元素将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止

l  浮动的元素,不再占空间了,并且浮动元素的层级要高于普通元素。

l  浮动的元素,一定是“块元素”。不管它原来是什么元素。

l  如果浮动元素,没有指定宽度的话,浮动后它将尽可能的变窄。因此,浮动元素一般要定宽和高。

l  一行中的多个元素,要浮动一起浮动,要不浮动都不浮动

浮动元素的功能:可以实现将多个块元素并列显示。

1、 CSS浮动清除

需要在浮动元素的下边,使用清除浮动操作。   clear:both | left | right;

或在父元素使用。  overflow: hidden;

  • CSS清除浮动的功能有两个:(1)可以使包围元素从“视觉上”包住浮动元素,(2)清除之下的其它元素将恢复默认排版。
  • 有浮动就得有清除。
  • 如果包围元素(里面只有浮动元素,没有其它内容)指定了高度,那么可以不使用清除功能。

 

 

 

 

 

CSS继承性

CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终都会“叠加”到内层元素上。

CSS文本属性都会被继承的:color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height等

提示:<body>中的CSS属性会被所有的子元素继承

CSS优先级

(1)     单个选择器的优先级

行内样式>id选择器>class选择器>标签选择器

(2)     多个选择器的优先级

多个选择器的优先级,一般情况下,指向越准确,优先级越高。

display属性

  • 功能:规定网页元素如何显示的问题。
  • 取值:none(隐藏)、block(以块元素显示)、inline(以行内元素显示)
  • block:可以实现将行内元素转成块元素。
  • inline:可以实现将块元素转成行内元素
  • inline-block:转成行内块元素。

 

 

overflow属性:当内容溢出时,该如何显示

  • overflow:当内容溢出时,溢出的内容如何显示。取值:visible(可见(默认值))、hidden(影藏)、scroll(出现滚动条)、auto(自动)

cursor光标类型

cursor:网页中光标的类型,取值:text(文本)、help(帮助)、pointer(手形)等。

CSS定位

  • Position:元素定位方式,取值static、fixed、relative、absolute
  • Static:静态定位(默认状态、不定位)
  • Fixed:固定定位。
  • Relative:相对定位。
  • Absolute:绝对定位。

定位方式,要与定位属性配合使用

  • 定位坐标:指定定位的元素,距离目标元素多远的距离。
  • Left:定位元素,距离目标元素左边的距离。
  • Top:定位元素,距离目标元素上边的距离。
  • Right:定位元素,距离目标元素右边的距离。
  • Bottom:定位元素,距离目标元素下边的距离。

n  固定定位,position:fixed

l  固定定位,是相对于浏览器窗口来进行的定位。

l  固定定位,不占空间,层级要高于普通元素。它不会随着网页的滚动而滚动。

l  如果不指定定位的坐标的话,固定定位元素的位置在原地不动。

l  固定定位元素,一定是“块元素”,不管原来它是什么元素。

n  相对定位,position:relative;

l  相对定位,是相对于“原来的自己”进行定位。

l  相对定位,依然占空间,层级高于普通元素。

l  如果不指定定位坐标的话,相对定位元素的位置在原地不动。

l  相对定位,原来是行内元素,定位后还是行内元素;原来是块元素,定位后还是块元素。

 

 

提示:相对定位和绝对定位,一般情况下是配合使用的。

n  绝对定位,position:absolute;

l  相对于祖先定位元素(相对定位),来进行定位。

u  如果它的父元素没有进行任何定位的话,再往上找定位元素。

u  如果一直找到<body>都没有找到定位元素的话,那就相对于<body>来进行定位。

l  绝对定位元素,不占空间,层级要高于普通元素。

l  如果不指定定位坐标的话,绝对定位元素的位置在原地不动。.

l  绝对定位元素,一定是“块元素”,不管原来它是什么元素。

l  多个定位图片层叠时:

 

 

HTML引入CSS的方法

1、嵌入式

       通过<style>标记,来引入CSS样式。

       语法格式:<style type=”text/css”></style>

       提示:<style>中的CSS样式,只能给当前网页使用。

              同一个网页中,<style>标记可以多次使用。

2、外联式

通过<link>标记,来引入一个外部的CSS文件(.css),这样的话,可以实现公共的CSS代码被多个网页共享

<link rel=”stylesheet” type=”text/css” href=”css/public.css”>

<link>标记的常用属性

l  rel:也就是引入的是什么类型的文件,取值:stylesheet。

l  type:内容类型。

l  href:引入的CSS文件地址。

提示:<link>标记放在<head>标记中。

                     同一个网页中,可以使用多个<link>来链入多个外部文件。

      

 

      

2、 行内式(主要用于js控制元素的样式)

每一个HTML标记,都有一些公共的属性:class、id、title(鼠标放上有一个提示信息)、style。

HTML标记中的style属性的值,与CSS中样式一模一样。

行内样式的优先级最高,比ID选择器还要高。

CSS表格属性

Border-collapse:表格边框线合并,取值:collapse

 

 

 

盒子模型

我们可以把每一个HTML标记,都看成是一个“盒子”。

“盒子”特征:内容的高度或高度、边框线、内填充、外边距。

“盒子”的总宽度:内容的宽度+边框宽度*2+左填充*2+左外边距*2

 

 

上下外边距合并问题——这是一种现象

上下两个块元素,如果每一个元素都指定了四个外边距,那么上下相邻的那个外边距会发生合并的现象,合并后取其中较大的外边距。

 

 

要实现上下两个<div>之间的距离为100px,该如何实现呢?

1、 上下两个<div>其中一个只指定margin-bottom:100px,而另外一个<div>的margin-top:0px,这样可以实现。

2、 可以在上下两个<div>中间,添加一个空的<div>,并且给空<div>指定高度为100px,也可以实现。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML完全使用详解 PDF扫描版?

下一篇:CSS元素水平垂直居中的方法