【css学习笔记---盒模型，布局】的更多相关文章

CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在…

css学习笔记---盒模型，布局

1.外边距叠加 当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加,元素被包含时也有可能会发生叠加(如果没有内边距和边框),如果一个空元素没有内边距和边框本身也会发生上下边距的叠加.   只有普通文档流中块框的垂直外边距才会发生叠加,行内框.浮动框或绝对定位框之间的外边距不会发生叠加. 2.定位 css有3中基本的定位机制,普通流,浮动和绝对定位.浮动和绝对定位会脱离普通流,但是float跟绝对定位又有点不一样,绝对定位完全不会再影响普通流中的元素,但是float对其…

87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 display:flex 注:设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 注:Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)最新flex 兼容性查看请点此处 最新Flex兼容性 Flex 容器 flex contain…

css学习_css盒模型及应用

1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red                (solid/dashed/dotted/double) 案例:table表格中  合并边框的写法 table {border-collapse:collapse} 案例:圆角边框(css3) border-radius:5px:(4个角都是5px,最大是变成一个圆) b.padding(内边距) padding…

CSS学习笔记——响应式布局

响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端. 响应式布局的优缺点 优点: 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面缺点: 兼容各种设备工作量大,效率低下 代码累…

CSS学习笔记：flex布局

目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction 2.2 justify-content 2.3 flex-wrap 2.4 align-items 2.5 align-content 2.6 flex-flow 3. 子项属性 3.1 flex 3.2 align-self 3.3 order 参考资料:https://www.bilibili.…

CSS学习笔记：grid布局

目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 auto关键字 2. row-gap, column-gap 3. grid-auto-flow 4. items对齐 4.1 justify-items 4.2 align-items 4.3 place-items 5. content对齐 6. grid-auto-columns/grid-auto…

利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>中国石油大学</title> </head> <style>  *{   margin: 0px auto;   padding: 0px;  }  .top-head{   width: 100%;   height…

李洪强和你一起学习前端之(6)css行高,盒模型,外边距

李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = "stylesheet> 实现了css与html的分离 行内式写法 1.2Html标签的分类 按照显示模式进行分类 1.2.1块级元素 元素自己独占一行(默认有宽度) 可以设置宽度和高度 子元素的宽度与父元素的宽度一样 1.2.2行内元素 所有元素在一行上显示 不能直接设置宽度和高度 1.2…

CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; } </style> <div id="user"></div> (2)( class ) 类选择器 :  .        => 标签拥有 class="user" 属性 <style> .user { widt…

CSS学习笔记09 简单理解BFC

引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 1…

CSS学习笔记10 相对定位，绝对定位与固定定位

文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置. position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.(忽略 top, bottom, left, right 或者 z-index 声明). relat…

微信小程序开发：学习笔记[4]——样式布局

微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | block | inline-block. position.float来实现布局,缺乏灵活性且有些适配效果难以实现.比如像下面这种常见的信息列表,要求内容高度不确定下保持垂直居中: 这种情况下,我们更建议用flex布局. 在开始介绍flex之前,为了表述方便,我们约定以下术语:采用flex布局的元素…

CSS学习笔记

CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u5B8B%u4F53" 就是\5B8B\4F53 font-family: 中文,英文,最好的是unicode编码 eg. font-family: "SimSun","SimHei",sans-serif; 字体名称 英文名称 Unicode 编码 宋体 S…

CSS3弹性盒模型布局模块介绍

来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/ Web布局一直个是难点,但貌似现在我们有更好的选择了. 背景 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想…

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里…

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但…

浅谈css中的盒模型（框模型）

css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边框 ,一个盒模型如图: 其中包含了两种盒子: 标准模式:盒子的宽高只有内容的宽高 此时的css设置为: box-sizing:content-box 另外一种是ie模式:盒子的宽高=内容(content)+填充(padding)+边框(border)的总宽高 此时的css设置为: box-sizin…

css高级选择器&盒模型

css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子代)选择器 /*后代选择器:用空格将父级和子级连接*/ .sup .sub{ color:red } /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/ .sup > .sub{ color:red } 1.子代选择器是(一级嵌套关系) 2.后代选择器(一级或者多级嵌套关系) 兄…

基础选择器,长度与颜色,标签display,嵌套关系,盒模型,盒模型布局

css基础选择器 # *(统配选择器): 控制html, body,以及body下所有用于显示的标签 # div(标签选择器): 该标签名对应的所有该标签 # .(class选择器)(eg: .div => class="div"): 类名为div的所有标签 # #(id选择器)(eg: #div => id="div"): id名为div的唯一标签 选择器的优先级 # 理解: 控制范围约精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式 #…

div+css学习笔记一（转）

div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致margin-left/right双倍边距 解决方法加上display:inline; 这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间. 2.居中问题:如果在body中设置了text-align:center,则div在IE中能居中,但是在FF中不能居中,如要在FF中也…

web开发： css高级与盒模型

一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style type="text/css"> /*群组选择器: 同时可以控制多个选择器*/ /*#dd, div, #…

彻底搞懂flex弹性盒模型布局

为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+ flex属性的分类 我们先来概览一下flex的所有属性,属性看似多杂,其实分为两大类: flex container flex-flow (复合属性,包含以…

2022-07-10 第五小组 pan小堂 css学习笔记

css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作.它可以同时控制多张网页的布局 外部样式表存储在 CSS 文件中 也称级联样式表. 外部样式表: 内部样式表: 内联样式 类选择器 优先级> 标签选择器 Class 用 . id 用 # 1.标签选择器 2.id选择器 3.类选择器 4. 并列选择器 div, p{ } 两者 5.后代选择器 div…

HTML+CSS学习笔记 (7) - CSS样式基本知识

HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,下面这种写法是错误的: <p>这里文字是红色.</p…

HTML+CSS学习笔记 (6) - 开始学习CSS

HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. CSS样式的优势 大丈夫当如此!是英雄,分我…

HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据. 语法: <form method="传送方式" action="服务器文件"> 讲解: 1.<form>:<form>标签是成对出现的,以<form>开始,以</form>…

HTML+CSS学习笔记(4) - 认识标签（3）

HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如: <a href="http://www.baidu.com" title="点击进入百度&qu…

HTML+CSS学习笔记（3）- 认识标签（2）

HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-li是没有前后顺序的信息列表. 语法: <ul> <li>信息</li> <li>信息</li> ...... </ul> 举例: <ul> <li>精彩少年</li> <li>美丽突然出现&…

HTML+CSS学习笔记(2) - 认识标签（1）

HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签.文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等. 讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢? 更容易被搜索…