width 百分比 bfc

2024-08-28

css中width的计算方式，以及width:100%的参考系

PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertical-align设置为基准线,此元素的高度也为本行的高度.当横向空间不够,或者元素为block时,文档流会换行显示. 除去绝对定位.固定定位的元素,文档中的每一个元素在文档流中是占据一定空间的,此空间包括margin.border.padding.content.根据元素的display.line-

width百分比

table中的td可以在页面中直接在元素上设置width:但是li不能只能在页面中写style: <!-- <li width="20%" class="p-box">1</li> <li width="20%" class="t-box">2</li> <li width="20%" class="m-box">3<

关于BFC不会被浮动元素遮盖的一些解释

简介在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box.其实,浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖. 例证创建两个浮动元素和一个BFC,然后改变BFC的margin值和浮动元素的margin值,观察它们的位置. .f1r { background: skyBlue; float: left; width: 200px; } .f

【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询不同物理分辨率的设备,在还原设计稿时,css中设置的px所对应的物理像素是不同的,css像素并不是一个固定宽度. 如设计稿总宽100px,屏幕视窗物理像素1000px,如果要设置设计稿沾满屏幕,那么css中设置的1px=1000/100物理像素. 因此通过一套样式,是无法实现各端的自适应.由此我们联想: 如果一套样式不行,那么能否给每一种设备各一套不

css知识总结

---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握CSS三种显示模式> 6. 熟练掌握CSS背景属性> 7. 熟练掌握CSS三大特性> 8. 熟练掌握CSS盒子模型> 9. 熟练掌握CSS浮动> 10.熟练掌握CSS定位> 11.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media---

深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结

写在前面严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 序言 HTML+CSS作为前端入门语言,其使用难度并不大,但其复杂度并不低.想学会HTML+CSS不难,想写好就很难了.君不见,达到同样的页面效果,有人div.float.position等等齐上阵,洋洋洒洒上千行的代码.有人header.footer.flex,几百

Web前端面试题整合，持续更新【可以收藏】

饭后闲来无事,把这几年带学生用的一些面试题整合一下,供上!拿走,不客气!应付一般公司的二面基本上是够用了.祝你早日拿到心仪的offer. css相关 1. 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高,垂直 4.表格,center,middle:水平垂直 5.display:table-cell:模拟表格,all 6.绝对定位,50%减自身宽高 7.绝对定位,上下左右全0,margin:auto 8.绝对定位加相对定位.不需要知道宽高

详解用CSS3制作圆形滚动进度条动画效果

主题今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢,那篇博客只是制作出来效果而已,并没有动画效果,因为当时正期末复习期间,所以就省了制作动画的时间成本.所以,今天就一起把各种效果都实现吧! 内容先看一下效果图,会提升我们的学习兴趣哟: 好的,我将按照此图从上到下的顺序讲解,由于第一和第二种效果之气那篇博客<CSS实现进度条和订单进度条>已经介

Python 【第七章】：Html 和 CSS

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它. 浏览器解释区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode].混杂模式) CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode]) Doctype Doctype 告诉浏览器使用什么

transition代替简单的animation注意事项

一. transition 和 animation 不支持 Internet Explorer 9,以及更早的版本. 二. 要变化的属性 transition-property:要变化的属性,比如元素变宽则是width,文字颜色要变色这是color:W3C给出了一个可变换属性的列表: CSS属性改变的对象 background-color 色彩 ( 渐变色在background不是属于background-color,而是属于background-image.对于background

css-九宫格自适应的实现

高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css01-九宫格</title> <style> * { padding: 0;

关于inline-block的间隙问题

很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上. 目标样式:评级星星实现手段:<span class="star"><span class='star1'></span></span> 相应样式:.star给一个灰色星星背景,display:inline-block使其支持宽高:.star1

css3动画（transition）属性探讨

在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠标事件来定义.js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等 transition的基本语法: css3动画通过transition属性和其他css属性(颜色,宽高,变形,位置等等)配合来实现. transition的语法: transit

《CSS那些事儿》读书笔记

注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多多指教. 代码演示我统一放到了jsfiddle上,国内访问速度稍慢些,大家耐心点.或是大家知道国内有类似的在线调试网站,麻烦和我分享下,在此先谢了. 该笔记中只给出了部分代码演示链接,如果想看该书的完整示例代码,可到百度云:http://pan.baidu.com/s/1o64sPR0 下载,我已经

CSS3 Transitions

浏览器支持属性浏览器 transition Internet Explorer不支持过渡属性. Firefox4需要前缀-moz-. Chrome和Safari需要前缀-webkit-. Opera需要前缀-o-. CSS3的过渡效果,让一个元素从一种效果转换到另一种效果. div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari

两列布局，读《css那些事儿》

两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点:float.width固定. :after清除浮动. 前提:

Flexbox学习总结

flex语法采用Flex布局的元素,称为Flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目". 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end:交叉轴的开始位置叫做cross start,结束位置叫做cross end. 项目默认沿主轴排列.单

Bootstrap 使用

bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 同理为使IE6.7.8版本浏览器兼容css3样式,引入下面代码: <script src="https://oss.maxcdn.com/libs/respond.js/

css-inline-block和float的布局二者择其一？

几个月前,带着不甘和忐忑毅然决然的在亚马逊离职了,当时不知道对我来说是好是坏,现在看来,当初的选择还是蛮不错的.感觉在亚马逊的几个月貌似接触最多的就是wiki和tt了,怀着对技术热忱离开,拒绝了腾讯,搜狐和凤凰网,最后来到了经纬系下的一家创业公司,开启了创业潮!个人在title和technology两方面对比还是更喜欢后者吧,反正还没毕业,路还长着呢,好了言归正传!!! inline-block属性: 最近和boss直聘的前端leader吃饭,说到了布局的问题,其实css布局还是挺容易让人入坑的

(二)HTML中的部分标签

HTML作为一种超文本标记语言,其中用到了大量的标签,昨天主要看了HTML中的图像标签和表格标签. (一)图像标签 <img> <img src="url"/>(url 是统一资源定位符的意思uniform resource locator) 标签img中的属性:alt="文本" -------->图片无法显示时的替换本文属性(养成良好习惯,最好都具有该属性) border="_px"-------->图像的边

fastadmin 后台管理框架使用技巧(持续更新中)

fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc.fastadmin.net/docs/index.html 这里只整理一下在使用过程中用到的小技巧,以便用到的时候查看,其实,在fastadmin的论坛中,有一篇介绍后台表格的文章,说的也不错,如有问题,请先点击:一张图解析FastAdmin中的表格列表的功能如果还没解决,那就继续往下看了 1.修

width 百分比 bfc

热门专题