文本溢出+BFC规则+常见游览器问题

最新推荐文章于 2021-12-13 11:57:38 发布
最新推荐文章于 2021-12-13 11:57:38 发布
阅读量290 收藏
点赞数
分类专栏： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyiyang111/article/details/110351691
版权

day08

文件命名规范

统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。

原则： 1）方便理解，见名之意

2）方面查找

例如：

首页—index
产品列表—prolist产品详细页面—pro_detail
新闻列表—newslist新闻详细页面—news_detail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback
留言—leavewords

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

  • banner：放置在页面顶部的广告，装饰图案等长方形的图片
  • logo：标志性的图片
  • button：在页面上位置不固定，并且带有链接的小图片
  • menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
  • pic：装饰用的图片
例子：

banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gif

代码规范

html

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；

不要忽略可选的关闭标签，例： 和 。

块元素可以嵌套行内元素和行内块,行内元素不可以套块元素(a除外) a>div

复合标签的直接子代按照规定写(ul>li,ol>li,dl<dt+dd)

一个界面上有且只有一个H1元素,一般用在logo上

自定义属性时,最好用data-属性名 命名属性名字 方便获取

CSS

尽量用class属性取挑选元素 .类名 {}

不要写超出三个-5个的类选择器

不要出现任何单独的标签选择器!!!

#id 100 权重最大 父元素 id

css书写规范
div.a {
    布局相关的属性;  display,overflow,float,position,margin,padding
    本身的属性;width,height,border,bgc,
    文本的属性;text-,font-,...
    其他属性;z-index,border-radius,box-shadow,cursor,resize...
    
}

网站三剑客(head)

TDK

Title 网页标题 4-6词 词语

<title>   </title>

Description 描述

<meta name="description"  content="U.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

Keywords

网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东

鼠标样式属性

  1. cursor:auto; 默认

img

  1. cursor:crosshair; 加号

img

  1. cursor:text; 文本竖标

img

  1. cursor:wait; 等待

img

  1. cursor:help; 帮助

img

  1. cursor:progress; 过程

img

  1. cursor:inherit; 继承
  2. cursor:move; 移动

img

  1. cursor:ne-resize; 左下右上箭头

img

  1. cursor:ns-resize; 向上向下箭头

img

  1. cursor:nw-resize; 左上右下箭头

img

  1. cursor:pointer; 手指

img

  1. cursor:zoom-in; 放大镜

img

  1. cursor:zoom-out; 缩小镜

img

  1. cursor:grab; 手

img

  1. cursor:grabbing; 抓拳

img

  1. cursor:no-drop; 红圈禁止

img

  1. cursor:not-allowed; 红圈禁止

img

实现箭头

原理： 定位两个三角形 （边框）

<style>
            .box {
                width: 50px;
                height: 50px;
                /* background-color: pink; */
                position: relative;
                margin-left: 100px;
                margin-top: 100px;
            }
            /* 定位 黑色  */
            .arrow::before {
                content: '';
                position: absolute;
                left: 0;
                top: 1px;
                border-width:20px 20px 0px 20px;
                border-style:solid;
                border-color:#000 transparent transparent transparent;

            }
            /* 白色 */
            .arrow::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0px;
                border-width:20px 20px 0px 20px;
                border-style:solid;
                border-color:#fff transparent transparent transparent;

            }
        </style>
    </head>
    <body>
        <div class="box arrow"></div>

精灵图技术（sprites雪碧）

前端图片优化技巧之一

精灵图：多张小图拼合成一张大图

精灵图技术原理：用背景属性插入精灵图 ，用background-position属性移动图片的位置，把想要显示的图片部分显示在大小固定的盒子里

​

优缺点：

优点：

  1. 减少http请求次数 ，提高代码加载的速度
  2. 易替换整体风格

缺点：需要测量

文本溢出处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0Mmz9Cu-1606650984190)(media/文本溢出.png)]

文本溢出处理

单行文本溢出

实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图：
dome1

多行文本溢出

实现方法1：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
 overflow: hidden;
 text-overflow:ellipsis;

效果如图：
dome2

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
  4. 兼容性差

实现方法2：

兼容性比较好 伪元素…加在盒子末尾

.box2 {
            position: relative;
            width: 150px;
            /* 高度是行高的倍数 显示几行就是几倍数 */
            line-height: 30px;
            height: 90px;
            border: 1px solid red;
            overflow: hidden;
          
        }
        .box2:after {
            content: '...';
            position: absolute;
            right: 0px;
            bottom:0;
            padding-left: 20px;

        }
<h3>方法2</h3>
    <div class="box2">
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
    </div>

day09

表单结构

作用：收集用户信息

表单：

​ 作用： 用来收集用户信息；也叫 表单框（表单域form）

<form method=""></form>

​ action: 传给后端的地址

​ method: 传给后端的方法

​ GET： 从后端获取数据，数据量比较小，安全性比较低，速度较快

​ POST： 向后端发送数据，数据量大，安全性高，速度较慢

​ name: 表单的标识

表单控件:

​ 在表单里面，绝大部分的表单控件都是input标签，通过type属性的不同来区分的，表单控件要写在form标签的里面, 不是独占一行的

​ 文本框

<input type="text">

name:控件字段名字

value:用户输入的值

​

​ 密码框

 <input type="password">

​ name:控件字段名字

value:用户输入的值

​ 提交按钮

<input type="submit">

​ value: 按钮里面的文字

​ 没有value属性，默认是‘提交’两个字

​ 一旦点击submit，就会将表单里面的内容通过method的方法提交给action的地址

​ 重置按钮

<input type="reset">

​ value: 按钮里面的文字

​ 只能清空当前form表单里面的内容

​ 单选框

<input type="radio">

​ name： 给单选框分组的（相同name的单选框是一组的）

​ checked: 默认选中

​ disabled: 禁用状态

​ value: 发送给后端的值

​ 多选框（复选框）

<input type="checkbox">

​ name: 给多选框分组（相同name的多选框是一组的）

​ checked: 默认选中

​ disabled: 禁用状态

​ value: 发送给后端的值

​ 下拉菜单

<select>    <option value="">131</option>    <option value="">132</option></select>

​ value: 发送给后端的值

​ selected: 默认选中

多行文本框（文本域）

<textarea rows="" cols=""></textarea>

​ rows: 一共能显示多少行

​ cols: 一行能显示多少字（英文字母）

普通按钮

<button></button><input type="button">

get与post

​ \1. get是从服务器上获取数据，post是向服务器传送数据。

​ \2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML，HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

​ \3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

​ \4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

​ \5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

兼容性问题

1、ie8下图片边框问题（记）
<a>
   <img src="">
</a>

解决办法：reset.css
img {
    //取消默认添加的边框
    border:none;
}
2. ie7下子元素相对定位 父盒子overflow属性失效问题
3. ie6下小高度盒子问题

原因：ie6下有默认行高

4. ie6浮动双边距问题
5. ie8下透明度问题（记）

其他浏览器可以背景透明+内容不透明或者背景和内容一起透明

背景透明, 内容不透明
background-color:rgba(0,0,0,.3)
背景和内容一起透明
opacity:0-1; 0是完全透明 （消失）  1是不透明
ie8下透明度显示效果:

背景透明+内容不透明
背景和内容一起透明

ie8不支持rgba和opacity属性,

解决办法

ie专属透明滤镜,filter:Alpha(opacity=n) 0=<n
=<100
n=30 就相当于opacity=0.3
但是只能实现背景和内容一起透明

解决办法:1.把内容拿单独的盒子装起来
2.设置这个装文本的盒子的定位属性为相对定位,给背景父盒子加一个静态定位属性

常见问题（所有浏览器）（记）

图片下间隙问题

盒子>img 图片和盒子多的底边有一个默认的间距

 图片下间隙：
        原因：图片具有文本的特性---》 以基线对齐---》 间距就是基底之间距离
        解决办法：
          1. 给父盒子加字体属性
          2. 图片设置除了基线以外的对齐属性
          3. 给图片转块元素

css hack（了解）

结构hack(条件hack)(ie10废除了)（记）

在ie的低版本里 查询一些盒子或者是样式要不要显示的条件

  // 在什么地方需要显示 ie8- 条件是： 只要浏览器版本是ie8及其以下就显示这个p 
    
  //   lte: less than or equal 小于或者等于


    <!--[if lte IE 8 ]>
    <p>
        您的浏览器版本太低，可能存在要换的危机 <a href="">UC</a>
    </p>
    <![endif]-->
css属性hack
.box {
            color: red;
            
             /* ie7及其以下的标识是* */
             *color:orange;
            /* ie6及其以下是蓝色 */
            _color:blue;
             /* ie8-ie9识别\0 */
             color:deeppink\0;

           
           
        }
选择符集hack
   /* ie6下识别的类 */
       *html .a {
            background-color: deeppink;
            border-radius: 50%;

        }
        /* ie7下识别的类 */
       * + html .a {
            background-color: springgreen;
            border-radius: 50%;
       }

day10

BFC规则

1. 什么BFC规则？

Block Formatting Context 块级格式化上下文

块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部

2. 哪些属性可以触发BFC规则？

   1. float不为none
   2. position属性为absolute和fixed
   3. oveflow不为visiable 
   4. html 根标签

3. BFC有哪些规则

   1. BFC盒子内部的子标签按照垂直从上到下排
   2. 共用一个BFC盒子的垂直方向上的外边距会发生塌陷现象
   3. 子标签都会父盒子的左边界停靠，即使浮动元素也如此
   4. BFC盒子内部浮动元素也要参与高度计算
   5. BFC区域和浮动元素不重叠
   6. BFC盒子是一个密闭空间   外部不影响内部  内部不影响外部

4.解决的问题

2—》外边距塌陷

3—》浮动特性

4—》清除浮动影响

5----》图文不环绕 (p+overflow)

经典的多列布局

自适应： 一个盒子的宽度随着屏幕宽度发生变化 单位：%

两列自适应布局

原理： 两列并排 左列固定宽度 右列宽度自适应（100%）

/* 1.解决方案：左列+ float: left; */

/* 2.解决方案 左列+ position:absolute */

三列自适应布局

原理： 左右两列固定宽度 中间列自适应 (100%)

圣杯布局

过程：

三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居中

双飞翼布局

过程：

原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用中间列盒子的内容盒子的外边距把中间列内容居中

图片优化技巧

减少http请求 降体积

  1. 合适地方选择合适的图片类型

    jpg 不支持背景透明 装饰性，商品盒子图片 (60-70)

    png 支持背景透明 （精灵图）png-8

    webp 背景透明+ 无损压缩+体积小 不兼容ie8-

  2. 在线压缩工具 压缩图片

  3. 小图拼合成精灵图

  4. 单一的小图 纯色 —》字体图标

  5. 图片可以采用编码 base64

该睡觉觉了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题
u012925833的博客
05-22 1840
1. 何为BFC? 文章：https://juejin.im/post/5909db2fda2f60005d2093db#heading-8 BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与...
BFC的布局规则.docx
03-01
了解BFC的布局规则对于优化页面布局和解决一些常见的CSS问题至关重要。 1. **内部Box的垂直布局**： 在BFC中，块级元素会在垂直方向上依次堆叠。这意味着它们不会水平排列，而是按照从上到下的顺序布局。例如，...
获得select被选中option的value和text以及select处理文字超出宽度自动换行的问题
weixin_43194235的博客
02-26 2493
select处理文字超出宽度自动换行的问题 在select标签style里面添加上 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 300px;（你所需要的宽度） 除width属性外，顺序不要颠倒！ 如何获得select被选中option的value和text js方法 &lt;select id="dd...
Select下拉框被overflow遮挡的问题
Lou_Lan的博客
05-13 9006
问题概述   如果你没有使用插件，没有使用别人给的组件，这个问题一般是不会出现的。但是如果你使用了别人的组件，那么你就会遇到这个问题。我这里说说我遇到的这个问题的地方，总共是2个地方。 是我在使用iview的，使用select，由于父级框position: relative，并且overflow:auto，所以select下拉框的时候就被挡在父级下面（虽然滚动可以看到，但是觉得很不舒服） 是我在使用vue-treeselect的时候，这个哥们也是和上面一样，被挡在了下面。（这个不演示了，道理一样） 上述
BFC（block formatting context）块级格式化上下文
weixin_44785498的博客
01-12 341
BFC 1 为什么会有BFC？ 从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC 父元素受子元素影响例子：子元素浮动，父元素的高度被压缩变为 0 2 BFC 的定义 BFC: block formatting context 块级格式化上下文。 BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。 3 如何触发 BFC 触发BFC有4种方式 float 不为 none posit
BFC的概念？ 规范是什么？ 生成？作用？ 有什么缺点？
Stride的博客
11-19 910
BFC的概念？ 规范是什么？ 生成？作用？ 有什么缺点？ 1.bfc全称Block formatting context，块级格式化上下文，字面理解就是一个独立渲染的区域，里面的内容不受外界的影响。 2.一般设置了浮动，绝对定位/固定定位、dispaly的值为inline-block、table-cell、flex…或者元素设置了overflow的值除visible的情况下会产生。 3.一般用于清除浮动、设置左边固定大小，右边自适应布局，margin之间的层叠问题。 4.缺点的话因为我没有找到其他文献，我猜
面试官：请说说什么是BFC？大白话讲清楚
热门推荐
蛙人的博客
04-12 1万+
BFC到底是什么东西 BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。 简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 怎样触发BFC 这里.
前端知识点（一）：BFC(块级格式化上下文)+清除浮动
蒋小姐的博客
12-13 272
1.BFC---块级格式化上下文 只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器，内容元素和外部元素不会互相影响。 （1）触发BFC的方式 根元素 浮动 float:left/right; 固定或绝对定位 position:absolute/fixed; overflow不为visible ...
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
创建BFC的常见方法包括：根元素、浮动元素（float不是none）、绝对定位元素（position为absolute或fixed且不依赖于包含块定位）、display为inline-block、table-cell、flex、grid的元素以及overflow值不为visible的...
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本篇将深入探讨BFC规范，帮助初学者从入门到精通。 BFC全称为Block Formatting ...
Vue优势，HTML常见问题，
10-18
let const，水平垂直居中，事件代理，防抖节流，Ajax优缺，性能优化，清除浮动BFC，H5，es6新特性
常见的几种页面布局、BFC以及处理过程中遇到的高度塌陷问题
01-20
一、常见的几种页面布局 静态布局 定位布局 流式布局 弹性布局 自适应布局 响应式布局 圣杯、双飞翼、栅格布局 1、静态布局 特点： 传统的网页布局形式，页面上的所有元素的尺寸均使用px（像素）作为单位，当屏幕...
细说BFC
喵酱的笔记本
01-10 529
一、BFC概念 FC（Formatting Contexts）即格式化上下文，是W3C CSS2.1规范的一个概念，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局以及和其他元素之间的关系和作用 常见的FC有：BFC（块级格式化上下文）IFC（行级格式化上下文）、GFC（网格布局格式化上下文）、FFC（自适应格式化上下文） BFC（Block Formatting Conte...
BFC规范的一些理解
sinat_18558725的博客
07-05 5555
BFC虽然名字很陌生，但是我们在日常的网页代码编写过程中，会经常性的使用到。先给大家介绍下w3c官方网站给出的解释  Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block> box
命名规范 -- css命名规范
这里是迷阵的博客耶
10-04 317
css命名规范 1.BEM命名规范 BEM是块（block）、元素（element）、修饰符（modifier）的简写，由Yandex团队提出的一种前端css命名方法论。 BEM命名约定的模式是： .block{} or .block-index{}//一级组件或元素（全部是小写字母或数字，名称中的不同单词用单个连字符（-）分隔） .block__element{}//.block的后代（两个下划...
命名规范
kungc1的博客
06-18 491
项目实际开发的过程中，对数据库以及项目中用到的方法名，函数名以及一些类等等。规范的命名会使开发人员更快的了解项目，也让我们阅读代码更加的舒服。 命名规范需要同一性：在编写一个模块或整个项目的时候，要遵循整个项目或模块的命名风格，保持命名风格在整个模块中的同一性。 标志符组成：标志符采用英文单词或组合，最好不要出现拼音，并且要注释该名称的意思或含义。 使用命名时，我们可以遵守一些命名规则，例如...
BFC规范的理解
cao_dan的博客
08-24 1672
是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它. 创建BFC float的值不是none position 的值不是static或者relative display的值是inline-block,table-cell,flex,table-caption或者inline-flex overflow的值不是v...
HTMLCSS小白——浮动模型、两个经典bug（bfc解决四种方式）、导航栏、伪元素、文字溢出处理
weixin_45174208的博客
03-02 306
伪元素 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } /*伪元素天生为行元素*/ span::before{ content: "一张"; ...
分布式电网动态电压恢复器模拟装置设计与实现.doc
最新发布
07-06
本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。
前端面试常见问题规整.pdf
04-13
了解BFC有助于避免常见的布局问题，如高度塌陷和文本环绕。 这份文档不仅涵盖了面试中的基础知识，还深入剖析了技术原理，对于前端开发者提升面试技巧和解决实际问题具有很强的指导价值。持续更新的特性意味着它将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值