HTML+CSS(12)
2018-06-24 02:22:22来源:未知 阅读 ()
n 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)清除之下的其它元素将恢复默认排版。
- 有浮动就得有清除。
- 如果包围元素(里面只有浮动元素,没有其它内容)指定了高度,那么可以不使用清除功能。
n CSS继承性
CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终都会“叠加”到内层元素上。
CSS文本属性都会被继承的:color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height等
提示:<body>中的CSS属性会被所有的子元素继承
n CSS优先级
(1) 单个选择器的优先级
行内样式>id选择器>class选择器>标签选择器
(2) 多个选择器的优先级
多个选择器的优先级,一般情况下,指向越准确,优先级越高。
n display属性
- 功能:规定网页元素如何显示的问题。
- 取值:none(隐藏)、block(以块元素显示)、inline(以行内元素显示)
- block:可以实现将行内元素转成块元素。
- inline:可以实现将块元素转成行内元素
- inline-block:转成行内块元素。
n overflow属性:当内容溢出时,该如何显示
- overflow:当内容溢出时,溢出的内容如何显示。取值:visible(可见(默认值))、hidden(影藏)、scroll(出现滚动条)、auto(自动)
n cursor光标类型
cursor:网页中光标的类型,取值:text(文本)、help(帮助)、pointer(手形)等。
n 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 多个定位图片层叠时:
n 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选择器还要高。
n CSS表格属性
Border-collapse:表格边框线合并,取值:collapse
n 盒子模型
我们可以把每一个HTML标记,都看成是一个“盒子”。
“盒子”特征:内容的高度或高度、边框线、内填充、外边距。
“盒子”的总宽度:内容的宽度+边框宽度*2+左填充*2+左外边距*2
n 上下外边距合并问题——这是一种现象
上下两个块元素,如果每一个元素都指定了四个外边距,那么上下相邻的那个外边距会发生合并的现象,合并后取其中较大的外边距。
要实现上下两个<div>之间的距离为100px,该如何实现呢?
1、 上下两个<div>其中一个只指定margin-bottom:100px,而另外一个<div>的margin-top:0px,这样可以实现。
2、 可以在上下两个<div>中间,添加一个空的<div>,并且给空<div>指定高度为100px,也可以实现。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:CSS元素水平垂直居中的方法
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash