CSS中几个初涉元素<position><float>

刚接触CSS不是太长时间  对于CSS基本属性也是略懂

就在这里做一个总结

CSS会更多的延用HTML中的一些基本属性  例如文字属性的改变方式 <span>元素  <p>元素

而CSS更多的优点是体现在对于页面布局 和页面整体美感的设置上   <div>元素就很好的解决了整体页面的布局问题

对于现在所掌握的技术而言  <div>元素更多是用在为整个图形界面定义一个坐标

要提到深受喜爱的<div>  当然离不开其中一个重要的元素

<position>

 1 <head>
 2 <style>
 3 .a{width:700px;
 4 height:800px;
 5 border:1px solid red;
 6 position:relative;
 7 top:100px;
 8
 9 left:300px;
10 }
11 .b{width:700px;
12 height:200px;
13 border:1px solid black;
14 position:relative;
15 top:0px;
16 left:0px;
17
18
19
20 }
21
22 </style>
23
24
25 </head>
26
27
28 <body>
29
30 <div class="a"></div>
31 <div class="b"></div>
32
33
34 </body>

代码所示<position>元素  主要用在给大的边框定位  而中间嵌入的框架利用<position>元素中的relative属性实现相对位移  继承父集元素的定义

<float>元素是实现文字图片以及众多元素漂移的元素

属性值有<left><right>

时间: 2024-11-10 15:43:46

CSS中几个初涉元素<position><float>的相关文章

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

css中的流,元素,基本尺寸

流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level element)和内联元素(inline element). 1.块级元素 1.1 概念相关 "块级元素"对应的英文是 block-level element,常见的块级元素有 div,li,table等. 块级元素和 display:block 不是一个概念 例如块级元素 li 和 tab

[ css 伪元素 :before :after ] css中before, after伪元素特性表现解释和实例

一.特性表现one: 不能左右:empty伪类 CSS3选择器中有个:empty伪类,表示当元素里面什么都没有的时候(包括空格.标签内换行),应用相关样式.在现代web网页开发制作中,非常常用也非常方便. 例如,某元素类名是.box, 如下HTML和CSS: <div class="box"></div> .box { background-color: #cd0000; } .box:empty { background-color: #fae6e6; } 因

CSS中的块级元素与行级元素

最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底边距都是可以设置的. 3.元素的宽度如果不设置的话,默认为父元素的宽度. 常见的块级元素:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>

css中的关于margin-top,position和z-index的一些bug解决方案

这两天在写一个demo的时候,就碰到一些css的问题,不知道能不能算bug,很有可能是因为我写的代码太少,孤陋寡闻了_(:зゝ∠)_.记录一下,以防下次遇到同样问题. 进入正题: 1.问题描述:div嵌套时内部div设置的margin-top样式会作用到外层div(父元素)上. 1 <style> 2 .demo{ margin-top: 10px;} 3 </style> 4 5 <div> 6 <div class="demo">de

CSS中的块级元素、内联元素(行内元素)

Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元素.块级元素比较霸道,默认状态下每次都占据一整个行,后 面的内容也必须再新起一行显示.当然非块级元素也可以通过css的display:block;将其更改成块级元素.此外还有个特殊的,float也具有 此功能. Inline element 内联元素 通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高

CSS 中的内联元素、块级元素、display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

CSS 中的内联元素、块级元素以及display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫

原文地址:https://segmentfault.com/a/1190000015052653 感想: 真神奇! HTML code: <div class="panda"></div> CSS code: html, body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color