重温前端基础之-css浮动之怪异现象

其实,两种情况中box2的内容都是围绕着浮动元素box1来的. 因为:浮动元素会覆盖块元素,但块元素里的内容(内联盒)不会被覆盖,而是围绕着浮动盒. 将box1的背景色去掉,真相就大白了: 此时发现,box2确实是被box1所覆盖了,但是box2的内容并没有被覆盖,而是围绕着box2.…

文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 在 CSS 中,我们通过 float 属性实现元素的浮动浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存…

前端基础之CSS(浮动-解决溢出-实现个人头像框)

目录一:浮动float 1.什么是浮动? 2.浮动的作用 3.浮动有两个特点 4.float格式二:代码实现左右浮动边框三:浮动造成父标签塌陷问题(清除浮动) 1.浮动会造成父标签的影响三:清除浮动的副作用(父标签塌陷问题) 1.自己加一个div设置高度 2.利用clear属性 3.通用的解决浮动带来的影响方法四:overflow溢出属性 1.当代码出现溢出时 2.解决代码溢出五:代码溢出的应用场景 1.实现个人头像 2.解决设置头像照片溢出问题 3.圆形头像示例一:浮动float…

前端第二篇---前端基础之CSS

前端第二篇---前端基础之CSS 目录一.css介绍二.css语法三.css的几种引入方式四.css选择器五.css属性相关六.盒子模型拓展一.css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.css语法 2.1css实例每一个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 2.2 CSS注释 /*这是注释…

02 前端基础之CSS

目录前端基础之CSS css简介基本选择器(重要) 组合选择器(重点) 属性选择器分组与嵌套伪类选择器伪元素选择器选择器的优先级字体相关背景属性边框属性 display属性盒子模型浮动定位是否脱离文档流溢出属性 z-index属性透明度练习前端基础之CSS css简介 # 层叠样式表>>>:就是给HTML标签修改样式语法结构选择器 { 属性名1:属性值1; 属性名2:属性值2 } 注释语法 /*注释内容*/ 引入方式 1.style内部直接编写css…

前端基础：CSS样式选择器

前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2.一条或多条声明:如下所示: selector { property: value; property: value; property: value; property: value; ... } 例如: h1 {color:red; font-size: 14px;} CSS的四种使用方式 1.行…