浮动和伪类

最新推荐文章于 2022-05-16 20:44:39 发布
最新推荐文章于 2022-05-16 20:44:39 发布
阅读量49 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62852343/article/details/120856961
版权

li:last-child(找最后一个li)，li:first-child(找第一个li) li:nth-child()(根据自己写的值) li:nth-last-chid()

偶数2n 奇数2n+1 找前五个-n+5 从第五个往后n+5

浮动：

1:浮动的元素找相邻浮动的元素顶部对齐，在同一行显示

2：浮动的元素脱离标准流，在页面不占位置

3.浮动的元素只影响下面元素不会影响上面的元素

4.浮动的元素只能压住盒子，压不住盒子里面的内容

5.浮动的元素可以设置宽高，默认宽度是内容的宽度

6.浮动不会超出父元素的padding值，只在父元素内容区域内容进行浮动

wangxiqing-z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浮动、定位、伪类、伪元素
m0_67736469的博客
04-19 173
一、浮动 1 传统网页布局的三种方式 普通流（标准流/文档流） 浮动 定位 普通流（标准流/文档流） 按照标签规定好的默认方式排序 （1）块级元素会独占一行，从上向下顺序排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table （2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动切换 常用元素：span、a、i、em等 网页布局第一准则：多个元素纵向排列找标准流，多个块级元素横向排列找浮动. 2.什么是浮动 语法 选择器{ float:属性值；} 3.浮动
浮动float：使用伪类实现，简单易操作
liusslove的博客
03-07 664
/*所有的子元素都浮动*/ .divall >*{ float: left; } /*伪类清除浮动*/ .divall:after{ content: ‘.’;/*在.divall后添加元素*/ display: block;/*为块级元素*/ height: 0; clear: both;/*清除说有浮动*/ visibility: hi
伪类清除浮动
沧笙踏歌的博客
05-29 346
之前写的项目有个base.css，后来找不到了，记录一下 /*清除浮动代码*/ .clearfloat:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; } .clearfloat { zoom: 1; } 浏览器支持好，不容易出现怪问题（大型网站都有使用，如：...
after伪类清除浮动
刘鹏博的博客
05-22 3711
       当我们用 float 的时候，会造成父级元素的塌陷，进而影响到我们的整体布局，因此，我们有时候需要清除浮动所带来的问题。有很多种清除浮动的方法，最简单粗暴的方法就是直接给塌陷的父级加高度，但是，这种方法对于需要从后台动态遍历数据的时候，这种“死”高度就会造成页面的乱版。所以，不建议使用。       最常用的方法之一就是利用伪类来清除浮动塌陷问题，只需要给塌陷的父类元素加上清除浮动的...
浮动（float）
qq_44846625的博客
06-01 900
float 文档流 默认状态下元素在文档中所处的位置 浮动布局 适用场景 块元素的横向排布 浮动元素的特点 浮动(float)的值有两个 ：左浮动（left）和右浮动（right）。 设置了浮动的元素，其默认大小有内容撑出 （对于块元素而言） div中没有设置宽度，宽度等于其父元素的宽度,给div和span都设置左浮动后div的宽度是内容撑开的宽度 设置了浮动的元素，可以设置宽高。（对于行元素而言） 设置了浮动元素，水平浮动，直到遇到父级元素的边界或者另外一个浮动元素停止浮动（哪个元素在前面哪
行内元素在设置浮动后可以设置高宽
赵圆圆
03-21 1799
平时经常给这样的行内元素设置浮动float:left or float:right，浮动了之后还可以给它们设置高度啊宽度啊。这点大家都知道，但是为什么呢？为什么行内元素在浮动之后就可以设置高宽了呢。 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话： position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:n
CSS使用placeholder-shown伪类实现输入框浮动文字效果
11-21
本文将详细讲解如何利用`:placeholder-shown`伪类来实现一种被称为“浮动文字标签”或“浮动标签”的交互效果，使得标签在用户输入时动态地展示和隐藏，从而增强表单的可用性和美观性。 ### 1. `label`标签和`...
JS中使用 after 伪类清除浮动实例
10-20
通过上述方法，即使在不支持`:after`伪类的IE6和IE7浏览器中，也能成功清除浮动，确保布局的兼容性。在使用`:after`伪类清除浮动时，需要确保该伪元素不继承父元素的浮动属性，所以设置了`clear: both;`来确保这一点...
CSS浮动+伪类实现导航栏下拉功能
zxh996的博客
07-03 1522
CSS浮动+伪类实现导航栏下拉功能前言一、浮动二、伪类三、导航栏下拉案例总结 前言 在前端的学习中，浮动和伪类算是使用的较为频繁的属性，我在这篇文章中，将为大家简单介绍一下，并用一个导航栏案例加深学习的印象，仅供参考学习。 一、浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 <style> div { /*设置左浮动*/
[记录]-关于行内元素在浮动后可以设置宽高的思考
jgsecurity的博客
11-10 887
平时经常给<a><span>这样的行内元素设置浮动float:left or float:right，浮动了之后还可以给它们设置高度啊宽度啊。这点大家都知道，但是为什么呢？为什么行内元素在浮动之后就可以设置高宽了呢。 引用下曹刘阳写的《编写高质量代码-Web前端开发修炼之道》一书中看到的一句话： position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position：absolute 、 f
[html] 可以给内联元素设置宽和高吗？为什么？
歌谣的博客
04-12 863
[html] 可以给内联元素设置宽和高吗？为什么？ 1.正常情况下不能设置宽高(可替换内容元素除外例如img) 2.元素被浮动，绝对定位，固定定位后，可以设置宽高 3.display:block,display:inline-block等后可以设置宽高 4.内联元素的宽高是由其内容决定的，并且在一行显示（可以换行），呈现包裹性,因此设置宽高无效。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
css中的浮动伪类及定位
weixin_44746630的博客
04-18 565
1.元素的水平浮动： left right both <div>块级元素 当元素浮动时会脱离文档流（不再占有原来的位置） 2.元素要想水平浮动的基本条件： 要浮动的子元素的宽度<=父元素的宽度 3.子元素浮动之后父元素则不能被撑开（因为脱离文档流） 4.想要父元素被撑开两种方法（在不设置高度的情况下）: a:在父元素中加入overflow：hidden(益处部分被隐藏) ...
css基础(2)——伪类，浮动，定位
qq_51913153的博客
05-16 747
1.伪类 css伪类表示标签的一种特殊状态，为特殊状态设置属性 格式为 选择器：伪类名 主要分为三类： ：hover 鼠标移入状态 ：active 点击，激活 ：focus 聚焦,对于可输入内容的组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style ...
css 伪元素 伪类 使用 万能清除浮动 ..
热门推荐
java_goodstudy的博客
12-20 2万+
参考 http://blog.jobbole.com/49173/ css 伪元素即插入的虚伪元素 像:before :after 插入元素 css 伪类 就是 操作class 样式 利用伪元素清除浮动 ps 利用伪 元素插入的dom 在dom结构中是看不到的 不过可以在css 中看到 .clearfix::after { conte
HTML，CSS3利用伪类清除浮动的解决方法
flionn的博客
07-17 6167
.clearfix:after { content:"."; clear: both; height: 0; overflow: hidden; visibility: hidden; display: block; } .clearfix { zoom: 1;}   利用css3伪类：after在应用clearfix的元素的结尾添加content中的内容，添加了一个句号"."，并且把...
:after伪类+content内容清除浮动
tian361zyc的博客
05-23 6083
伪类after
行内元素浮动后可以设置宽高
abcd7709的博客
06-26 772
当该属性(display)不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat（ie）或cssfloat（非ie）。(注意这里为stylefloat或cssfloat，而不是float)...
使用before 和 after 伪元素清除浮动
最新发布
03-28
在CSS中，使用before和after伪元素来清除浮动非常常见。以下是一个示例： HTML代码： ``` <div class="child"></div> <div class="child"></div> <div class="child"></div> ``` CSS代码： ``` .parent:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值