前言&#xff1a;我们可能听说过&#xff0c;float元素是脱离了文档流的元素&#xff0c;其他元素将无视它的存在。但当我们实际应用中&#xff0c;实际效果并不完全是这样的。 float float设计之初&#xff0c;主要是为了解决文章配图时的布局问题。如下图 HTML代码 <bo…

又是一周一度的提升时间啦&#xff0c;这周我们来学习CSS进阶 目录 一、盒子模型&#xff1a;CSS 中控制页面布局的核心概念 什么是盒子模型&#xff1f; 如何控制盒子模型的各部分&#xff1f; 1. Content 2. Padding 3. Border 4. Margin 盒子模型的计算方法 示例&a…

SMILET 这个问题以前问过很多次&#xff0c;简单的典型答案是&#xff1a;它不能用纯CSS来完成。名字里写着&#xff1a;级联样式表只支持层叠方向的造型&#xff0c;而不是向上。但在大多数希望产生这种效果的情况下&#xff0c;例如在给定的例子中&#xff0c;仍然有可能利用…

CSS元素分类 在CSS中&#xff0c;html中的标签元素大体被分为三种不同的类型&#xff1a; 块状元素 内联元素(又叫行内元素) 内联块状元素 常用的块状元素有&#xff1a; <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table&g…

CSS基本选择器(对指定的标签设置样式&#xff0c;要把指定的标签选择出来)&#xff1a;元素选择器、类选择器、id选择器、组合选择器、通用选择器 1. 元素选择器(类型选择器或标记选择器)&#xff1a;声明哪些元素采用css样式 2. 类选择器(class)&#xff1a;应用样式而不考虑具…

CSS-设置块元素和行内元素 什么是行元素什么是块元素 一&#xff1a;块元素 块元素单独占据一行&#xff0c;并且排斥和其他元素在同一行&#xff0c;在浏览器中&#xff0c;块元素出现的形状是矩形&#xff0c;并且盛放其他元素。 块元素 : 列表 表格 div h1 p … 这些都是…

:nth-child() 选择器&#xff0c;该选择器选取父元素的第 N 个子元素&#xff0c;与类型无关。 odd 奇数行 even 偶数行 效果图 页面 <template><div class"page-container"><transition-group tag"ul" appear><li v-for"item …

css中的五种定位方式 1、静态定位&#xff08;static&#xff09;2、绝对定位&#xff08;absolute&#xff09;3、相对定位&#xff08;relative&#xff09;4、固定定位&#xff08;fixed&#xff09;5、总结 对页面进行布局时必不可少的要对元素进行不同的定位&#xff0c;在…