CSS核心的几个概念

盒模型、position、float。他们是css的基础,之间看似独立却又相辅相成。

元素类型

块级元素、内联元素

他们之间有以下区别:

1、块级元素独占一行,除非显示的修改display属性。而内联元素都会在一行内显示。

2、块级元素可以设置width、height属性,而内联元素不行。

3、块级元素的width默认为100%,而内联元素则根据自身的内容或子元素来决定宽度 。

内联元素不可以设置高度,但可以通过设置display:block;来达到效果。这时元素将以块级形式呈现。

当display:inline;时,元素以内联形式呈现。

要让元素在行内显示,又能设置高度,可以设置:display:inline-block;

盒模型

页面上显示的每个元素都可以看做一个盒子,即盒模型。

盒模型由四部分组成:content->padding->border->margin

元素宽度的计算...

另外两种特殊情况

绝对定位、浮动(position、float)

1、position

这个属性决定了元素将如何定位。大致有以下五种:

·static:默认值,元素相当于没有定位,在页面占据位置,不能使用top、right、botton、left移动元素。

·relative:相对定位,没有定位,在页面占据位置,可以使用top、right、botton、left移动元素。

·absolute:绝对定位,相对于最近一级的定位不是static的父元素进行定位,元素在页面不占据位置,可以使用top、right、botton、left移动元素。

·fixed:绝对定位,相对于浏览器窗口进行定位,其余和absolute一样。

·inhenit:从父元素继承position的值。

2、float

顾名思义,就是把元素浮动起来,取值共四个:left、right、none、inherit。

最初的float是用来实现文字环绕的,现在它的应用非常广泛。

时间: 2024-10-12 12:35:50

CSS核心的几个概念的相关文章

CSS 最核心的几个概念

本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正. 元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显示修改元素的 display 属性),

CSS 最核心的四个概念

本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正. 元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),

CSS 最核心的四个概念(摘录)

本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正. 元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),

CSS中的几个概念--------Day39

世界杯疯狂来袭,让这个原本就高温的夏季瞬间被引爆了,这肆虐的激情仿佛让一切都灼热了起来,绽放着刺目的光,工作之余总有那么一群人在那激烈的讨论着争辩着,抑不住的亢奋. 很不巧,往往这群身影中总有我的存在,哪怕我未曾说过一句话,可我依然很享受这种氛围.我常常想起那些青葱的校园时光,也总是和那么一群斗志满满,激情无限的家伙,打篮球,说篮球,就像这次马刺踏平热火,如果都还能聚在一起,估计又是一片争吵.是的,我爱篮球,胜过足球许多,但我还是坐在这里,假装着伪球迷的身份.终归是年龄有些大了,不再像以前那么苛

牛腩之CSS核心内容

根据牛老师的讲解,CSS的核心内容大致为四个部分:标准流.盒子模型.浮动和定位. 在学习核心内容之前,先来了解两个基本概念:块级元素和行内元素. 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的display属性默认值为"block",意思是该标签元素为块级元素,而对于span元素来讲,它的默认值为"inline",即行内元素. 所谓块级元素,就是在显示的时候自动占据

css核心基础总结篇

今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解为冲突的解决方案. 什么是冲突? 就是同个元素在使用不同的选择器选择中后添加相同的样式. 优先级规则可以表述为 行内样式>ID样式>类别样式>标记样式 在复杂的页面中,某一个元素有可能会从很多地方获取样式,例如一个网站的某一 级标题整体设置为使用绿色,而对某个特殊栏目需要使用蓝色,这样在栏目

Html与CSS快速入门01-基础概念

Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. Html(Hypertext Markup Language超文本标记语言):1990由Tim Berners-Lee爵士设计,成为了Internet上标准的文本传输形式,可以这么说,对于在互联网行业工作的我们来说,这就是我们饭碗的基础啊,嘿嘿. 基本文档格式,请见如下示例: 1 <!DOCTYP

Java并发编程(02):线程核心机制,基础概念扩展

本文源码:GitHub·点这里 || GitEE·点这里 一.线程基本机制 1.概念描述 并发编程的特点是:可以将程序划分为多个分离且独立运行的任务,通过线程来驱动这些独立的任务执行,从而提升整体的效率.下面提供一个基础的演示案例. 2.应用案例 场景:假设有一个容器集合,需要拿出容器中的每个元素,进行加工处理,一般情况下直接遍历就好,如果数据偏大,可以根据线程数量对集合切割,每个线程处理一部分数据,这样处理时间就会减少很多. public class ExtendThread01 { publ

CSS的样式表基本概念

一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <head> <style type="text/css"> p    /*以p标签命名,一下所有p标签都会执行此样式*/ { 样式} </style> </head> 3.外部样式表(最常用的) 新建一个css文件,需要在html文件中调用css样式