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

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

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

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

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

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

浏览目录 CSS介绍 CSS语法 CSS的几种引入方式 CSS选择器 CSS属性相关 一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.CSS语法 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 注释格式: /*这是注释*/ 三.CSS的几种引入方式 1.行内样式 行内样式是在标记的style属性中设定CSS样式.不…

1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. 1.1 HTML的缺陷 不能够适应多种设备 要求浏览器必须智…

一.背景属性 <style> p { /*背景颜色*/ background-color: red; /*字体颜色*/ color: blue; /*宽度和高度*/ width: 600px; height: 600px; /*背景图片*/ background-image: url('hlw.png'); /*背景重复*/ background-repeat: no-repeat; /* repeat(默认):背景图片平铺排满整个网页 repeat-x:背景图片只在水平方向上平铺 repea…