CSS核心的几个概念

简介: 盒模型、position、float。他们是css的基础,之间看似独立却又相辅相成。元素类型块级元素、内联元素他们之间有以下区别:1、块级元素独占一行,除非显示的修改display属性。而内联元素都会在一行内显示。

盒模型、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是用来实现文字环绕的,现在它的应用非常广泛。

css学习资料大全:http://www.imooc.com/article/3450

相关文章
|
8月前
|
存储 前端开发 JavaScript
css的变量和自定义变量概念
css的变量和自定义变量概念
|
8月前
|
前端开发 开发者
CSS面试考点:盒模型、选择器、单位和像素概念
【4月更文挑战第2天】 CSS面试考点:盒模型、选择器、单位和像素概念
60 12
|
8月前
|
前端开发 开发者
CSS中的这些基础概念你知道多少?
【4月更文挑战第1天】 CSS中的这些基础概念你知道多少?
55 0
|
8月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 002 一些基本概念
编程笔记 html5&css&js 002 一些基本概念
|
8月前
|
移动开发 前端开发 API
html和css部分概念
html和css部分概念
80 0
|
前端开发
Css盒模型的概念及组成
Css盒模型的概念及组成
Css盒模型的概念及组成
|
前端开发 UED 容器
【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器
欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。
164 0
|
Web App开发 存储 弹性计算
前端面试之CSS重点概念精讲
选择器 流、元素 盒模型 元素超出宽度...处理 元素隐藏 层叠规则 块级格式化上下文 元素居中 flex布局 Chrome支持小于12px 的文字 CSS 优化处理 (6个) 回流、重绘 硬件加速 Css预编译语言
449 0
|
编解码 前端开发
CSS 重要概念之新特性介绍
CSS 是前端开发中最重要的技术之一,它不断地在更新和改进,为网页设计师和开发人员提供更多强大的工具和效果。下面列举了一些 CSS 的新特性,来帮助您更好地掌握这个领域的知识。
89 0
|
前端开发 容器
CSS 重要概念之定位
CSS 定位是 Web 开发中非常重要的概念之一,它可以帮助我们准确地定位和布局 HTML 元素。在本文中,我们将介绍 CSS 中常用的三种定位方式:静态定位、相对定位和绝对定位。
98 0