使用div和选择器实现盒子模型

2024-09-04

DIV+CSS两种盒子模型（W3C盒子与IE盒子）

在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们能够把它转移到我们日常生活中的盒子(箱子)上来理解.日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 特点: 每一个盒子都有:边界.边框.填充.内容四个属性. 每一个属性都包含四个部分:上.右.下.左.这四部分可同一时候设置.也可

css — 选择器、盒子模型

目录 1. css引入方式 2. css选择器 3. css的盒模型 css: 层叠样式表 1. css引入方式行内样式 <div style='color:red;'>mjj</div> 内嵌式在head标签内部书写style <style> /*css代码*/ #box{ background-color: greenyellow; } </style> 外接式 <link href='css/index.css' rel='styleshee

前端HTML div标签的用法盒子模型

盒子模型边框 border -外边距 margin- 内容与边框距离padding[会撑大div边框]- 宽width-高height. div的奇特玩法 1.把div弄成圆形 [css设置border-radius: ?px;] 例子:<div class="circle" id="c1"></div> css: .circle{ width: 100px; height: 100px; border-radius: 50px; back

DIV+CSS两种盒子模型

盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 从上图可以看到 IE 盒子模型的范围也包括 margin.border.padding.content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading.

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

css3的盒子模型布局

写在前面的话: css3盒子布局,可以更简单直观的均分页面某一个div,并且还可以达到均分后的每一个元素中的内容上下居中.左右居中,但是该模型对浏览器的版本有要求: { display: -webkit-box; /* Firefox 30+,Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+

CSS自学笔记（10）:CSS3盒子模型

CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了一些新的模块,所以CSS3朝着模块化的方向发展. CSS3中比较重要的模块有:选择器.盒子模型.背景和边框.文字特效.2D/3D转换.动画.多列布局.用户界面. CSS3的选择器常用的和CSS选择器差不多. CSS3 盒子模型盒子模型是CSS3很重要的一个模型,它是指元素以何种方式显示以及元素间如

css盒子模型之边框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width:300px; height: 390px; background-color:pink; border-top-styl

我给女朋友讲编程CSS系列(4) CSS盒子模型

什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论] 的方式来写. 1, 看w3school的[CSS 框模型概述] 网址为: http://www.w3school.com.cn/css/css_boxmodel.asp 接着把[CSS内边距],[CSS外边距],[CSS外边距合并]看看. 小结: (1) 一般,在样式表中,都会先把所有元素的外边距和内边距设置为0 * { margin: 0; padding: 0; } * 是通配符,就是一个符

HTML文档与盒子模型

关于HTML 百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. 为什么叫用于“描述”网页文档的“标记”语言呢? 简单地说,它不像Java,C++等程式语言,而是通过标记(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习. HTML的构成HTML文件的结构通常由以下几个部分构成: 文档类型声明(doctype)

0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

typora-copy-images-to: media 第01阶段.前端基础.盒子模型盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位主题思路: 目标: 理解: 能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用: 能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 1.看透网页布局的本质

CSS复合选择器和div盒子模型

一.复合选择器(3种) 1.交集复合选择器特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class="c3">h3标题</h3> 相当于找的是h3标签class属性为c3的元素 2.并集复合选择器特点:简称集体声明,由多个选择器通过逗号隔开,链接在一起,它主要用于多个不同的标签具有相同的css属性 <!DOCTYPE html> <html> <

从div盒子模型谈如何写可维护的css代码（转）

市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉是南辕北辙.经过浩瀚文章搜索发掘下依旧一无所获之后,直接导致了我萌生一股写一篇CSS设计模式的冲动,至此写下这篇文章,其中叙述如有不当之处,也恳请各位提出意见,分享出您宝贵的经验. 在写页面之中,width, margin, padding这三个CSS属性可以说是用到频率最高的几个属性之一.但根据我

{前端CSS} 语法 Css的几种引入方式 css选择器选择器的优先级 CSS属性相关背景属性边框 CSS盒子模型清除浮动 overflow溢出属性　　定位（position）z-index

前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="c

CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

CSS 3 现状兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围 {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

Day 31：CSS选择器、常用CSS样式、盒子模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"

HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

一.外联样式通过link标签引入外部css文件夹中的xxx.css文件到head标签中例: 二. 1.组选择器选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

CSS初识- 选择器 &背景& 浮动& 盒子模型

# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 > 5. 熟练掌握CSS三种显示模式(inline.block.inline-block) > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性(层级性.继承性.优先性) > 8. 熟练掌握CSS盒子模型(border.padding.margin) > 9. 熟练掌握

第49天学习打卡（CSS 层次选择器结构伪类选择器属性选择器美化网页元素盒子模型）

推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red; } </style> 2.子选择器: 只有一代 ,儿子 /* 子选择器*/ body>p{ background

3、前端--伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型

伪元素选择器 # 首字调整>>>:也是一种文档布局的方式 p:first-letter { font-size: 48px; /*字体大小*/ color: red; } # 在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 p:before { content: '嘿嘿'; color: red; } <p>::before言而有信品行端正光明磊落待人以诚</p> # 在文本的后面通过css动态渲染文本>>>:

使用div和选择器实现盒子模型

热门专题