css基础样式四

上次我们讲到了相对定位;

这次我们了解下绝对定位;

绝对定位:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

绝对定位会脱离文档流。所以之前的位置就会被后面的内容给填补

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

浮动:

如图:浮动也会像绝对定位那样脱离文本流,就相当于飘了起来,在天上,地上的位置就会空出来。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,

任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

浮动可以向左浮动也可以向右浮动。代码如下:

div{

float:left;//向左浮动

float:right;//向右浮动

}

时间: 2024-10-15 18:21:49

css基础样式四的相关文章

Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板</title></head><body></body></html> 2.DOCTYPE声明放在html文件头部最新HTML5用<!DOCTYPE html>声明 3.css的引入方式a.直接在html下引入<st

CSS基础样式

1.基础样式 宽:width :高:height 块级元素和行内元素之间的转换 属性:display<br> 属性值: block 转换为块级元素 inline 转换为行内元素 inline-block 转换为行内块元素(希望能设置宽高,但又不换行) 2. 背景属性 背景色:background-color 背景图像:background-image:url("图片地址") 例:body{ backgroud-image:url("pic1.jpg")

css基础样式重置,浏览器样式统一及IE下样式优化

/*样式重置*/ body,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;} ul,ol{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-weight:400;} input:focus,button:focus{outline:none;} a:focus{outline:none;} /*基础样式*/ body{font-family:"Microsoft Yahei";color:#000;font-siz

css概述、css样式表分类、选择器分类、css基础样式

1 . 样式表  Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省网络带宽 使用独立于网页的CSS,有利于网页被搜索引擎收录 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签     1.1  引入方式 四种 style=""  行内样式表 <style>   内部样式表 <link rel=&

CSS基础学习四:元素选择器

在上一篇的博客中我们已经熟悉CSS语法,对于CSS代码格式也有了一些认识.下面我就来说一下CSS代码式: 选择器名称 { 属性名:属性值:属性名:属性值:......} 属性与属性之间用分号隔开:属性与属性值直接使用冒号连接:如果一个属性有多个属性值的话,那么多个属性值用空格隔开. 上述提到了我这一篇博客所要说的主题,就是选择器.选择器就是指定CSS语法要作用的标签,那个标签的名称 就是选择器. 基本的选择器可分为三种: a)html标签名选择器:使用的是html的标签名,又叫元素选择器. b)

HTML/CSS基础教程 四

CSS CSS(Cascading Style Sheets): 层叠样式表 . 它是一种用来表现HTML或XML等文件样式的计算机语言. CSS能够让网页表现与内容分离, 相对于HTML的表现而言, CSS能够对网页中的对象的位置排版进行像素级的精确控制, 支持几乎所有的字体字号样式, 拥有对网页对象和模型样式编辑的能力, 并能够进行初步交互设计, 是目前基于文本展示最优秀的表现设计语言. 上面这段来自百度百科对CSS的定义,我的理解是CSS将每个HTML标签的style进行单独的定义,这样就

CSS基础样式(base.css)

@charset "UTF-8";/*css reset*//*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0;

css基础样式总结

颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spacing:字间距/字母间距 word-

Web前端开发css基础样式总结

颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spacing:字间距/字母间距 word-